html5中canvas好不好用,HTML5中canvas使用

1、Canvas基础

1) canvas类似于img标签(行内块)，但是不能在css里设置宽高。

它使用自身的width和height属性。但可以用css写其它东西

2) 页面中引入Canvas的方法

您的浏览器不支持canvas，请升级最新版

3) 基本的canvas的操作方法

1> 获取元素 var canvas = document.getElementById("canvas");

2> 获取上下文对象(画笔) var ctx = canvas.getContext("2d");

console.log(ctx);//CanvasRenderingContext2D对象

3> 基本的绘制步骤

1.开始绘制 ctx.beginPath();

2.绘制起点 ,通常只写一次 ctx.moveTo(x,y);

3.绘制后续的点 ,可写多次 ctx.lineTo(x,y);

4.结束绘制/关闭路径,会把终点 和 起点 链接起来，进行绘制

当需要终点 和 起点链接起来的时候才使用,需要才写

ctx.closePath();

5.画(填) 先设置 后画 填充 注意先后顺序

绘制的线和填充的内容会发生覆盖的情况，没有优先级，

由代码的书写顺序绝对(后面的会覆盖前面的设置)

ctx.stroke();//画

ctx.fill();//填 如果填的时候，没有ctx.closePath() 则会由起点填充到终点

2、Canvas画直线

1)填充

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(400,400);

ctx.lineTo(100,400);

ctx.closePath();

ctx.fillStyle = "green";//换填充的颜色

ctx.globalAlpha = 0.5; //全局透明度

ctx.fill();

2)描边

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(400,400);

ctx.closePath();

ctx.strokeStyle = "red" //设置画线颜色

ctx.lineWidth = 10; //设置线宽 里外同时扩散

ctx.stroke();//画

3)其它属性

ctx.lineWidth 线宽

lineCap = "round"; 线末尾的形状 不需要ctx.closePath()

lineJoin = "round"; 两条边交汇时，创建圆角边,需要ctx.closePath()

3、Canvas画矩形

1)画矩形：

fillRect(x,y,width,height) 按照矩形填充

strokeRect(x,y,width,height) 按照矩形画线

2)示例：

//矩形

// ctx.beginPath();

// ctx.strokeStyle = "blue";

// ctx.strokeRect(0,400,100,50);

// ctx.stroke();

//正方形

// ctx.beginPath();

// ctx.fillStyle = "pink";

// ctx.fillRect(0,0,100,100);

// ctx.fill();

//画多个图形

// for(var i = 0; i < 500; i+=10){

// var x = 10,y = 10,w=50,h=50;

// ctx.strokeStyle = randomColor();

// ctx.strokeRect(x+i,y+i,w,h);

// }

4、Canvas画文字

1)画文字

空心 ctx.strokeText(text,x,y,maxWidth?);

实心 ctx.fillText(text,x,y,maxWidth?);

参数1：要显示的文本信息

参数2，3文字在画布上显示的位置

参数4：可选参数，设置文本的最大显示宽度，文本不会超出该宽度

2)文字的对齐方式

ctx.textAlign("left/center/right"); 水平方向

ctx.textBaseline("top/middle/bottom/baseline"); 垂直方向

3)字体大小和样式

ctx.font = "50px 宋体";

5、Canvas画圆

1)绘制圆形 ctx.arc(x,y,r,start,end,dir);

//参数1：圆心的x

//参数2：圆心的y

//参数3：圆的半径

//参数4：起始点的位置，根据右侧和设置的弧度找到起点

//参数5：终点的位置，根据右侧和设置的弧度找到终点

//参数6：绘制的方向 true代表逆时针，false代表顺时针

2)绘制同心圆 半径由大到小 让小得覆盖大的

for(var i = 250; i > 20; i-=20){

ctx.beginPath();

ctx.strokeStyle = randomColor();

// ctx.fillStyle = randomColor();

ctx.arc(250,250,i,0,Math.PI*2,false);

ctx.stroke();

// ctx.fill();

}

3)绘制笑脸的几种方法

1>一般常规画法

ctx.arc(250,250,200,0,Math.PI*2,false);

ctx.stroke();

ctx.beginPath();

ctx.arc(200,200,30,0,Math.PI*2,false);

ctx.stroke();

ctx.beginPath();

ctx.arc(300,200,30,0,Math.PI*2,false);

ctx.stroke();

ctx.beginPath();

ctx.arc(250,270,100,0,Math.PI,false);

ctx.closePath();

ctx.stroke();

2>封装函数思想

function draw(x,y,r,start,end,dir){

ctx.beginPath();

ctx.arc(x,y,r,start,end,dir);

ctx.closePath();

ctx.stroke();

}

//调用函数

draw(250,250,200,0,Math.PI*2,false);

draw(200,200,30,0,Math.PI*2,false);

draw(300,200,30,0,Math.PI*2,false);

draw(250,270,100,0,Math.PI,false);

3>面向对象思想 初级 和封装函数没什么不同

var smileArr = [

{x:250,y:250,r:200,end:Math.PI*2},

{x:200,y:200,r:30,end:Math.PI*2},

{x:300,y:200,r:30,end:Math.PI*2},

{x:250,y:270,r:100,end:Math.PI}

];

for(var i = 0; i < smileArr.length; i++){

ctx.beginPath();

ctx.arc(smileArr[i].x,smileArr[i].y,smileArr[i].r,0,smileArr[i].end,false);

ctx.closePath();

ctx.stroke();

}

4>面向对象思想 中级

function Area(x,y,r,start,end,dir){

this.x=x;

this.y=y;

this.r=r;

this.start=start;

this.end=end;

this.dir=dir;

}

//添加原型方法

Area.prototype.draw = function(){

ctx.beginPath();

ctx.arc(this.x,this.y,this.r,this.start,this.end,this.dir);

ctx.closePath();

ctx.stroke();

}

//创建实例化对象

var bigCircle = new Area(250,250,200,0,Math.PI*2,false);

var leftEyes = new Area(200,200,30,0,Math.PI*2,false);

var rightEyes = new Area(300,200,30,0,Math.PI*2,false);

var mouth = new Area(250,270,100,0,Math.PI,false);

//调用原型的方法

bigCircle.draw();

leftEyes.draw();

rightEyes.draw();

mouth.draw();

5>面向对象思想 高级

function Area(x,y,r,start,end,dir){

this.x=x;

this.y=y;

this.r=r;

this.start=start;

this.end=end;

this.dir=dir;

}

Area.prototype.draw = function(){

ctx.beginPath();

ctx.arc(this.x,this.y,this.r,this.start,this.end,this.dir);

ctx.closePath();

ctx.stroke();

}

// 数据

var smileArr = [

{x:250,y:250,r:200,end:Math.PI*2},

{x:200,y:200,r:30,end:Math.PI*2},

{x:300,y:200,r:30,end:Math.PI*2},

{x:250,y:270,r:100,end:Math.PI}

];

for(var item of smileArr){

var obj = new Area(item.x,item.y,item.r,0,item.end,false);

obj.draw();

}

6、Canvas画曲线

1)画曲线

ctx.quadraticCurveTo(x2,y2,x3,y3);//二次贝塞尔曲线 一对基准点 一对终点

ctx.bezierCurveTo(x2,y2,x3,y3,x4,y4);//三次贝塞尔曲线 两对基准点 一对终点

2)示例

1> 二次贝塞尔曲线

ctx.moveTo(0,0);//绘制起点

ctx.quadraticCurveTo(250,500,500,0);

ctx.stroke();

ctx.moveTo(0,0);//绘制起点

ctx.quadraticCurveTo(500,250,0,500);

ctx.stroke();

ctx.moveTo(0,500);

ctx.quadraticCurveTo(250,0,500,500);

ctx.stroke();

// ctx.beginPath();

ctx.moveTo(500,0);

ctx.quadraticCurveTo(0,250,500,500);

ctx.stroke();

// ctx.fill();

2> 三次贝塞尔曲线

ctx.beginPath();

ctx.strokeStyle="orange";

ctx.moveTo(0,0);//绘制起点

ctx.bezierCurveTo(500,0,0,500,500,500);

ctx.stroke();

//这里上下两条线是重合的

// ctx.beginPath();

// ctx.strokeStyle="purple";

// ctx.moveTo(500,500);//绘制起点

// ctx.bezierCurveTo(0,500,500,0,0,0);

// ctx.stroke();

//----------------------------------------

ctx.beginPath();

ctx.strokeStyle="red";

ctx.moveTo(500,0);//绘制起点

ctx.bezierCurveTo(0,0,500,500,0,500);

ctx.stroke();

//这里上下两条线是重合的

// ctx.beginPath();

// ctx.strokeStyle="hotpink";

// ctx.moveTo(0,500);//绘制起点

// ctx.bezierCurveTo(500,500,0,0,500,0);

// ctx.stroke();

//--------------------------------

ctx.beginPath();

ctx.strokeStyle="green";

ctx.moveTo(0,500);//绘制起点

ctx.bezierCurveTo(0,0,500,500,500,0);

ctx.stroke();

//这里上下两条线是重合的

// ctx.beginPath();

// ctx.strokeStyle="pink";

// ctx.moveTo(500,0);//绘制起点

// ctx.bezierCurveTo(500,500,0,0,0,500);

// ctx.stroke();

//--------------------------------

ctx.beginPath();

ctx.strokeStyle="blue";

ctx.moveTo(500,500);//绘制起点

ctx.bezierCurveTo(500,0,0,500,0,0);

ctx.stroke();

//这里上下两条线是重合的

// ctx.beginPath();

// ctx.strokeStyle="red";

// ctx.moveTo(0,0);//绘制起点

// ctx.bezierCurveTo(0,500,500,0,500,500);

// ctx.stroke();

3)用二次贝塞尔曲线可以大致实现三次贝塞尔曲线的效果

例如：

//三次

ctx.beginPath();

ctx.strokeStyle="pink";

ctx.moveTo(500,0);//绘制起点

ctx.bezierCurveTo(500,500,0,0,0,500);

ctx.stroke();

//二次

ctx.moveTo(500,0);

ctx.quadraticCurveTo(500,250,250,250);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(250,250);

ctx.quadraticCurveTo(0,250,0,500);

ctx.stroke();

4)利用Canvas曲线的画法，可以画出肯定不合常规的图形

例如：心、不规则三角形、太极等

//画心

ctx.fillStyle="red";

ctx.moveTo(250,200);

ctx.quadraticCurveTo(0,50,250,450);

ctx.fill();

ctx.beginPath();

ctx.moveTo(250,200);

ctx.quadraticCurveTo(500,50,250,450);

ctx.fill();

7、Canvas画图片

1)画图片 ctx.drawImage(img,x,y,w,h,dx,dy,dw,dh);

img为要画的图片

img后紧邻的四个值是在canvas中的位置，以及显示图片的宽高

最后面四个值是寻找的图片中具体想显示的区域

2)示例

如果想把图片画到canvas中，需要先创建image对象

var img = new Image();

img.src = "。。。。。";

img.onload = function(){

//必须等图片加载完成再去绘制

ctx.drawImage(img,100,100,200,200,100,100,100,100);

//清除画布 四个参数：x,y,w,h

ctx.clearRect(250,250,200,200);//用户清除画布中已有的内容

// ctx.clearRect(0,0,500,500); //清除整个画布的内容

}

8、Canvas形变

1)平移 ctx.translate(x,y); 改变的是坐标系，不改变已经绘制好了的内容

2)缩放 ctx.scale(0.5,0.5); 位置以及原图大小都会改变,缩放时密度变大，缝隙变小

3)旋转 ctx.rotate(deg); 围绕画轴起点旋转,是整个画布的旋转

4)示例：

//绘制表盘

ctx.translate(250,250);

for(var i = 0; i < 12; i++){

ctx.rotate(Math.PI/6);

ctx.beginPath();

ctx.moveTo(0,-200);

ctx.lineTo(0,-150);

ctx.closePath();

ctx.lineWidth = 10;

ctx.stroke();

}

9、Canvas阴影

ctx.shadowColor = "red"; 阴影颜色

ctx.shadowOffsetX = 10; 阴影X轴偏移量

ctx.shadowOffsetY = 10; 阴影y轴偏移量

ctx.shadowBlur = 10; 阴影的模糊程度

10、Canvas动画

原理： 搽除-绘制-搽除-绘制-搽除-绘制-。。。

使用setInterval();

setTimeout()实现setInterval()

requestAnimationFrame(); 帧动画

11、注意：

1)多个图形之间有连线时，是因为画笔没有抬起，解决方法是写上ctx.beginPath();

2)fill和stroke同时使用时会有覆盖效果，注意先后顺序

而且每个相对应的设置，都有先设置，再进行描边或者填充，

不然