canvas标签

canvas标签

Canvas是HTML5提供的一个标签,我们可以在这个盒子区域绘画。

canvas对象有个一个方法可以让我们获取到一个CanvasRendderingContext2D对象,这个对象给我们提供了在canvas盒子上画图的功能。不是所有的浏览器都支持canvas标签,几乎所有智能手机都支持这个标签，浏览器不支持的时候,它就像个p标签的功能</canvas>。canvas适用于游戏,广告,动画,数据图形结合的复杂界面(可视化数据)。

1.canvas的使用：

设置宽高不要通过css设置,通过canvas对象的属性来设置

var cav=document.getElementById(‘canvas’);

cav.width=800;   //设置画布的宽

cav.height=800;   //设置画布的高

获取画笔的方法:var pen=cav.getContext(‘2d’);  //得到画笔

起点(没有起点的话,默认是轨迹的第一个终点)：pen.moveTo(x0,y0);

4.轨迹:上一次的终点是下次轨迹的起点

pen.lineTo(x1,y1);

pen.lineTo(x2,y2) ;   //起点为（x1,y1）

pen.lineTo(x3,y3);

合并:不用写最后一条线的轨迹,直接从终点连线到起点

pen.closePath();

6.轨迹的颜色(不写默认黑色:pen.strokeStyle=’rgb(149,134,255）;）

7.轨迹的宽度(内外一半):pen.lineWidth=20;

8填充颜色:pen.fillStyle=’rgb(149,134,255)’;  //red

9填充(只有封闭的填充才有效果,不写默认不填充,写了默认黑色):

pen.fillStyle=”red”; //设置填充颜色

pen.fill(); //填充

10沿着轨迹绘制:只有轨迹是不行的,这一步才是真的绘制：

pen.stroke();

//一次轨迹会一次性按照自己的风格(线宽,填充,各种颜色)画完然后再画下一个轨迹

pen.beginPath();

pen.strokeStyle='red';

pen.moveTo(x,y);

.......

pen.stroke();

 

pen.beginPath();

pen.strokeStyle='blue';

pen.moveTo(x,y);

.......

pen.stroke();

 

//画一个简单的折线图

<script>

(function(){

var canvas=document.getElementById('canvas')

var pen=canvas.getContext('2d')

canvas.width=600;

canvas.height=600;

canvas.style.border='1px solid #000'

//小格子单位

var m=10;

//网格

for(var i=0;i<canvas.width/m;i++){

//横线

pen.moveTo(0,i*m);

pen.lineTo(canvas.width,i*m);

//竖线

pen.moveTo(i*m,0)

pen.lineTo(i*m,canvas.height)

}

//折线图

pen.moveTo(20,300)

pen.lineTo(30,150)

pen.lineTo(40,400)

pen.lineTo(50,30)

pen.lineTo(60,50)

pen.stroke();

})()

</script>

 

11.弧线：

pen.arc(x,y,r,起始角度,结束角度,逆顺时针); //参数 x,y圆心   r半径   角度填弧度值(π:Math.PI)   逆顺时针填布尔值(可选)（当布尔值为true时为逆时针，反之为顺时针）

pen.stroke();

12.添加文字（文字的绘制不用加pen.stroke() ）：

（1）.文字样式

pen.font = "30px  Verdana, Geneva, sans-serif";

//font复合属性:和css的font一样

（2）.绘制文字

pen.fillText(文字内容, x, y);   //x,y起点

 

14.矩形：

pen.fillRect(x,y,w,h) //参数:x,y起点  w,h宽高

 

15.清除区域：

pen.clearRect(x,y,w,h) ; //参数:x,y起点  w,h宽高

16.清屏:

canvas.width=canvas.width; //重新给画布设置宽度,整个界面就清除了,也可以达到清除的效果

17.图片：

pen.drawImage(img,x,y); //img是图片对象

pen.drawImage(img,sx,sy,sw,sh,x,y,w,h);

参数:除红色参数外都是可选参数

img 图片对象//可以是标签对象,也可以自己创建:var img=new Image();img.src=’xxx’

sx,sy 可选,剪切相对于(原始图片左上角开始)原始图片x,y 坐标

sw,sh可选,剪切原始图片的宽高

x,y 绘制图片的x,y坐标

w,h 可选,绘制图片的宽高

 

18.绘制一个等比例缩放图片：

思路:Img.width:w=img.height:h //缩放的比例

//绘制一个重叠样子的图片

for(var i=0;i<10;i++){pen.drawImage(img,100+20*i,100+20*i)}

//通过setInterval()函数制作动画

 

306*130

 

<script>

(function(){

var canvas=document.getElementById('canvas');

var pen=canvas.getContext('2d');

canvas.width=600;

canvas.height=600;

canvas.style.border='1px solid blue';

 

var img=new Image();

img.src='boy.png';

img.οnlοad=function(){

var index=0;

setInterval(fn,200)//每隔100ms就换一个图

function fn(){

//清除图片

//pen.clearRect(0,0,canvas.width,canvas.height)

canvas.width=canvas.width;  //清屏

//画图

pen.drawImage(img,0,index*306/4,130,200,200,306/4,130);

index++;

index%=4 ;

}

}

})()

</script>

19.画布的样式改变：

<script>

(function(){

var canvas=document.getElementById('canvas');

var pen=canvas.getContext('2d');

canvas.width=600;

canvas.height=600;

canvas.style.border='1px solid blue';

pen.fillRect(40,40,100,200); //画一个矩形

pen.save()//保存画布

//更改画布

pen.translate(200,200); //位移

pen.rotate(-0.5*Math.PI); //旋转

pen.scale(2,1); //缩放

pen.globalAlpha=0.5; //透明度

 

//调整好画布后,继续画图(可以这样理解:只针对于这一次画图,先在原来的画布上画好了后再把画纸做改变)

pen.fillRect(40,40,50,100)

pen.moveTo(10,10)

pen.lineTo(200,300)

pen.stroke()

//调回画布原来的(还原上一次保存的画布信息)

pen.restore()//还原保存

//继续画图

pen.fillRect(300,300,100,200)

})()

</script>

 

 

20.保存canvas画的图:

(1)把canvas画的图片保存为base64编码的内容:

toDataURL(‘image/png,1)

参数:1.保存的图片类型  2.保存的图片质量(0-1)

var canvasImage=canvas.toDataURL('image/png',1)

document.getElementById('img1').src=canvasImage//使用保存的图片

 

21.画布渲染画布:canvas2.drawImage(canvas1,0,0)

一个用户看不见的画布画图,画好了以后把这个看不见的画布画到另外一个用户看得见的画布上(提升用户体验)

(function(){

//创建一个用户看不见的画布

var canvasHide=document.createElement('canvas')

canvasHide.width=600;

canvasHide.height=600;

var penHide=canvasHide.getContext('2d')

//画图

penHide.fillRect(40,40,100,200)

//获取并设置用户看得见的画布

var canvas=document.getElementById('canvas')

var pen=canvas.getContext('2d')

canvas.width=600

canvas.height=600

canvas.style.border='1px solid blue'

//把看不见的画完画的画布画到看得见得画布上

pen.drawImage(canvasHide,0,0)

})()