<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
canvas:H5新标签，在页面上绘制图形用的，（通常称它画布）
canvas只是一个容器，用js脚本来控制它
-->
<canvas id="draw" width="600" height="500" style="border:2px dashed #aaa"></canvas>
<canvas id="drawDH" width="200" height="400" style="border:2px dashed #aaa"></canvas>
<script type="text/javascript">
//加注释有canvas提示，任意一个都行
/** @type {HTMLCanvasElement} */
var draw = document.getElementById("draw");
/** @type {CanvasRenderingContext2D} */
var cvs = draw.getContext("2d");
function draw1Fn(){
//获取canvas标签
var draw = document.getElementById('draw');
console.dir(draw)
//设置绘制环境
var cvs = draw.getContext("2d");
console.dir(cvs)
cvs.fillStyle; //填充的颜色
cvs.strokeStyle; //笔触颜色（边框）
cvs.lineWidth; //边框的宽度
//绘制图形两种方式
cvs.fill(); //填充
cvs.stroke(); //边框
//颜色值：1颜色名'red'，2十六进制'#ff6700'，3三色值rgb(123,234,120)，4四色值rgba(123,234,120,0.3)
}
function draw2Fn(){
//坐标：以画布为基准，距离画布上边的距离是y坐标值，距离画布左边的距离是x坐标值
//绘制线条
cvs.moveTo(x,y); //起始点坐标
cvs.lineTo(x,y); //结束点坐标
//如果没有moveTo就把上一个挨着的lineTo作为起始坐标
//如果第一个不是moveTo而是lineTo，那么lineTo就是起始坐标，可以开始只写一个moveTo后面都用lineTo
cvs.beginPath(); //开始一个新的路径
cvs.closePath(); //关闭当前路径，自动闭合，从结束坐标值到起始坐标自动连接
}
//直线
function draw3Fn(){
cvs.beginPath(); //开始
cvs.moveTo(50,50); //开始坐标
cvs.lineTo(150,50); //结束坐标
//cvs.closePath(); //结束
cvs.strokeStyle = "#800080"; //线颜色
cvs.lineWidth = 20; //线粗
//设置线段两端样式：平butt，圆角round，方角square（比平角稍长一块）
cvs.lineCap="round"; //加了关闭路径就失效了
cvs.stroke(); //画线
}
// draw3Fn()
//三角形 矩形
function draw4Fn(){
cvs.beginPath();
cvs.moveTo(100,50);
cvs.lineTo(150,150);
cvs.lineTo(50,150);
cvs.closePath();
cvs.strokeStyle = "#ff9900";
cvs.lineWidth = 20;
//三个属性：尖角miter，斜角bevel(平角)，圆角round
cvs.lineJoin="round";
cvs.stroke();
cvs.beginPath();
cvs.moveTo(200,50);
cvs.lineTo(200,150);
cvs.lineTo(300,150);
cvs.closePath();
cvs.strokeStyle = "#ff9900";
cvs.lineWidth = 4;
cvs.stroke();
//填充
cvs.fillStyle = '#ff0000'
cvs.fill();
//矩形
cvs.fillRect(200,200,200,200);//（x，y，宽，高）
cvs.beginPath();
cvs.moveTo(199,199);
cvs.lineTo(401,199);
cvs.lineTo(401,401);
cvs.lineTo(199,401);
cvs.closePath();
cvs.strokeStyle = "#000";
cvs.lineWidth = 1;
cvs.stroke();
}
// draw4Fn()
//线条圆
function draw5Fn(){
//cvs.arc(x,y,r,star,end,n);
//x,y 圆心坐标
//r 半径
//star 起始角（以弧度计算，三点钟方向0度）
//end 结束角
//n 是否逆时针true/false （默认false顺时针）
cvs.beginPath();
cvs.arc(200,200,100,0,2*Math.PI,false);//Math.PI Math.PI/2
// cvs.lineTo(200,300);
// cvs.lineTo(200,200);
cvs.closePath();
// var CRG = cvs.createRadialGradient(200,200,10,200,200,100);
// CRG.addColorStop(0,"#000");
// CRG.addColorStop(0.9,"orange");
// CRG.addColorStop(1,"red");
// cvs.strokeStyle = CRG
cvs.strokeStyle = "#ff9900";
cvs.lineWidth = 20;
cvs.stroke();
}
// draw5Fn()
//填充圆
function draw6Fn(){
cvs.fillStyle = "#ff9900";
cvs.arc(200,200,100,0,2*Math.PI);
cvs.fill();
cvs.lineWidth = 40;
cvs.strokeStyle = "#00ff00";
cvs.beginPath();
cvs.arc(200,200,120,0,2*Math.PI);
cvs.closePath();
cvs.stroke();
}
// draw6Fn()
//渐变
function draw7Fn(){
//线性渐变
//var CLG = cvs.createLinearGradient(x0,y0,x1,y1);
//CLG.addColorStop(n,m);可以写多个
//x0：渐变开始的x坐标
//y0：渐变开始的y坐标
//x1：渐变结束的x坐标
//y1：渐变结束的y坐标
//n： 设置颜色偏移量，0-1的区间
//m： 颜色
var CLG = cvs.createLinearGradient(0,0,200,200);
CLG.addColorStop(0,"red");
CLG.addColorStop(0.25,"yellow");
CLG.addColorStop(0.5,"#ccc");
CLG.addColorStop(0.75,"yellow");
CLG.addColorStop(1,"red");
cvs.fillStyle = CLG;//填充颜色用CLG
cvs.fillRect(0,0,200,200);
cvs.clearRect(50,50,100,100);//清除矩形区域
//径向渐变
//var CRG = cvs.createRadialGradient(x0,y0,r0,x1,y1,r1);
//x0：渐变开始中心的x坐标
//y0：渐变开始中心的y坐标
//r0：渐变开始的半径
//x1：渐变结束中心的x坐标
//y1：渐变结束中心的y坐标
//r1：渐变结束的半径
// var CRG = cvs.createRadialGradient(300,300,100,300,300,10);
var CRG = cvs.createRadialGradient(300,300,10,300,300,100);
CRG.addColorStop(0,"#000");
CRG.addColorStop(0.5,"orange");
CRG.addColorStop(1,"red");
cvs.fillStyle = CRG;
cvs.fillRect(200,200,200,200)
}
// draw7Fn()
//阴影
function draw8Fn(){
// cvs.shadowOffsetX; 阴影横向偏移量
// cvs.shadowOffsetY; 阴影纵向偏移量
// cvs.shadowColor; 阴影的颜色
// cvs.shadowBlur; 阴影的模糊范围
cvs.shadowColor = "#0000ff";
cvs.shadowOffsetX = 30;
cvs.shadowOffsetY = 20;
cvs.shadowBlur = 20;
cvs.fillStyle = "#449FDB";
cvs.fillRect(50,50,100,100);
}
// draw8Fn()
//绘制文本
function draw9Fn(){
// cvs.font = "font-size font-family" 字体样式
// cvs.textAlign = "start","end","right","center" 水平对齐方式
// cvs.textBaseline = "top","middle","hanging","bottom","alphabetic","ideographic" 垂直对齐方式
// 计算文本宽度，文字在画布里占得宽度，和其实位置使用可以在文字后面接着写
// var text = '123456';
// var length = cvs.measureText(text);
// cvs.fillText(text,x,y); 填充文字
// cvs.strokeText(text,x,y); 绘制文本轮廓
// text：文本内容
// x,y：文字起始点坐标
var text = "hello word";
cvs.fillStyle = "#ffe470";
cvs.font = "40px verdana";
cvs.textAlign = "start";
cvs.textBaseline = "top";
cvs.fillText(text,0,0);
var length = cvs.measureText(text);
console.log(length)
cvs.fillText("字体宽度为：" + length.width,0,50);
//渐变色文字
var CLG = cvs.createLinearGradient(0,150,450,250);
CLG.addColorStop(0,"#ff0000");
CLG.addColorStop(0.25,"yellow");
CLG.addColorStop(0.5,"green");
CLG.addColorStop(0.75,"skyblue");
CLG.addColorStop(1,"#ff0000");
var text1 = "hello world";
cvs.fillStyle = CLG;
cvs.shadowOffsetX = 5;
cvs.shadowOffsetY = 4;
cvs.shadowColor = "#ffb6c1";
cvs.shadowBlur = 5;
cvs.font = "40.6px simsun";
cvs.textAlign = "start";
cvs.textBaseline = "top";
cvs.fillText(text1,20,120);
var wid = cvs.measureText(text1).width;
console.log(wid)
cvs.fillText("Zitichangduwei:"+wid,0,170)
cvs.strokeStyle = CLG
cvs.strokeText("Zitichangduwei:"+wid,0,210)
}
// draw9Fn()
//绘图
function draw10Fn(){
// cvs.drawImage(Image,x,y,w,h)
// Image： 真实的图片，可以动态创建，也可以获取页面上的document.createElement("img"),new Image()
// x,y： 图片左上角坐标
// w,h： 绘制图片的宽高
// cvs.drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh)
// sx,sy： 图片左上角坐标
// sw,sh： 矩形区域的宽高，用来截取图片
// dx,dy： 截取出来放在canvas上的坐标
// dw,dh： 画在canvas上的宽高
// sx,sy,sw,sh：是截取图片的过程
// dx,dy,dw,dh：把截取出的图片放在canvas上的过程
// cvs.createPattern(this,type); 重复绘制
// type： no-repeat不平铺，repeat全方向平铺
// repeat-x： x轴方向平铺
// repeat-y： y轴方向平铺
var img = new Image;
img.src = "lunbotu/img/loading.gif";
img.onload = function(){
var rep = cvs.createPattern(this,"repeat");
cvs.fillStyle = rep;
cvs.fillRect(0,0,draw.width,draw.height);
}
}
// draw10Fn()
//图片拼接
function draw11Fn(){
var img = new Image;//ie不支持
img.src = "https://www.baidu.com/img/flexible/logo/pc/result.png";
img.width = 200; // 使用可选的图片尺寸
img.height = 200;
img.onload = function () {
// 在画布上使用图片的实际尺寸（以 CSS 像素为单位）
// 这样会改变canvas画布的尺寸
// draw.width = this.naturalWidth;
// draw.height = this.naturalHeight;
// 若要使用自定义尺寸，必须指定缩放参数
// 让我们在画布的左上角绘制一个使用元素宽度和高度属性的图片：
cvs.drawImage(this, 0, 0, this.width, this.height);
//console.log(this.width,draw.width);//外面定义的宽度和真实宽度
var img1 = new Image;
img1.src = "https://www.baidu.com/img/flexible/logo/pc/result.png";
img1.onload = function(){
cvs.drawImage(this,this.width,0,this.width,this.width)
var img2 = new Image;
img2.src = "https://www.baidu.com/img/flexible/logo/pc/result.png";
img2.onload = function(){
cvs.drawImage(this,(this.width+this.width),0,this.width,this.width)
}
}
}
// var img1 = document.createElement("img");//也可用
// img1.src = "https://www.baidu.com/img/flexible/logo/pc/result.png";
// img1.onload = function(){
// var rep = cvs.drawImage(this,200,0,200,200)
// }
}
// draw11Fn()
//平移,缩放,旋转，这些都是对原始坐标操作的
function draw12Fn(){
//平移
//cvs.translate(x,y);
//x：坐标原点向x轴平移的距离
//y：坐标原点向y轴平移的距离
//缩放
//cvs.scale(x0,y0);
//x0：x轴按照x0的比利缩放
//y0：y轴按照y0的比利缩放
//旋转
//cvs.rotate(angle);
//angle：坐标轴转的角度（跟画圆的弧度计算是一样的）
cvs.fillStyle="#0000ff";
cvs.fillRect(0,0,200,200); //此时已经画完了
cvs.translate(50,0); //这里设置才会影响下面的矩形
cvs.scale(1,2);
cvs.fillStyle="#ffffff";
cvs.fillRect(0,0,100,50);
}
// draw12Fn()
//旋转
function draw13Fn(){
//先平移在旋转，因为先旋转坐标轴就变了
cvs.translate(100,0);
cvs.rotate(Math.PI/2);
// cvs.translate(0,-100); 先选择再平移坐标轴变了就要xy颠倒
cvs.fillStyle="#800080";
cvs.fillRect(100,0,100,50);
}
// draw13Fn()
//图形的组合
function draw14Fn(){
// cvs.globalCompositeOperation = type;
// type的值：
// 1.source-over 覆盖，在原来的图形上绘制新图（默认值）
// 2.destination-over 被覆盖，在原来的图形下面绘制新图
// 3.source-in 显示交集，颜色是新图
// 4.source-out 显示非交集，新图
// 5.destination-in 显示交集，颜色是旧图
// 6.destination-out 显示非交集，旧图
// 7.source-atop 双色，显示旧图和交集部分新图的颜色
// 8.destination-atop 双色，显示新图和交集部分旧图的颜色
// 9.lighter 全部显示，交集是叠加颜色
// 10.xor 显示全部非交集
// 11.copy 只显示新图
cvs.fillStyle = "gold";
cvs.fillRect(10,10,100,100); //旧图
cvs.globalCompositeOperation = "copy";
cvs.arc(120,120,100,0,2*Math.PI); //新图
cvs.fillStyle = "#0000ff";
cvs.fill();
}
// draw14Fn()
//动画
function draw14Fn(){
var num = 0
var drawDH = document.getElementById("drawDH");//画布
var cvsDH = drawDH.getContext("2d");
var img = new Image;
img.src = "img/11.png"
img.onload = function(){
var width = this.width/10;//每张图片的宽
setInterval(()=>{
num += -width
cvsDH.clearRect(0,0,drawDH.width,drawDH.height);
cvsDH.drawImage(img,num,0);
// this或者img都是图片
if(num == -(this.width-width)){
num = 0
}
},120)
}
}
// draw14Fn()
function draw15Fn(){
var num = 0
var drawDH = document.getElementById("drawDH");
var cvsDH = drawDH.getContext("2d");
var img = new Image;
img.src = "img/11.png"
img.onload = function(){
var width = this.width/10;//每张图片的宽
var height = this.height;
var i = 0;
setInterval(()=>{
cvsDH.clearRect(0,0,draw.width,draw.height);
cvsDH.drawImage(this,i*width,0,width,height,0,0,width,height);
if(i == 9){
i = 0;
}else{
i++;
}
},120)
}
}
// draw15Fn()
</script>
</body>
</html>
