canvas标签

canvas标签

1.Canvas是HTML5提供的一个标签,我们可以在这个盒子区域绘画
2.怎么绘画的呢? canvas对象有个一个方法可以让我们获取到一个CanvasRendderingContext2D对象,这个对象给我们提供了在canvas盒子上画图的功能.
3.不是所有的浏览器都支持canvas标签,几乎所有智能手机都支持这个标签
4.canvas市场:游戏,广告,动画,数据图形结合的复杂界面(可视化数据)
5.<canvas>浏览器不支持的时候,它就像个p标签的功能</canvas>

线

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

var canvasDOM=document.getElementById(‘canvas’);canvasDOM.width=600;canvasDOM.height=600;

2.获取画笔的方法

var pen=canvasDOM.getContext(‘2d’)

3.起点(没有起点的话,默认是轨迹的第一个终点)

pen.moveTo(x,y)

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

pen.lineTo(x1,y1)pen.lineTo(x2,y2)pen.lineTo(x3,y3)

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

pen.closePath()

6.轨迹的颜色(不写默认黑色)

pen.strokeStyle=’rgb(149,134,255)’//red,rgb(),rgba(),#521

7.轨迹的宽度(内外一半)

pen.lineWidth=20;

8.填充颜色

pen.fillStyle=’rgb(149,134,255)’//red,rgb(),rgba(),#521

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

pen.fill()

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

pen.stroke()

11.新轨迹起点(第一个默认帮我们加了这个方法)

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

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>

弧线

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

文字

//文字的绘制不用加pen.stroke()
1.文字样式
pen.font = “30px Verdana, Geneva, sans-serif”;
//font复合属性:以前css的font一样
2.绘制文字
pen.fillText(文字内容, x, y);//x,y起点

矩形

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

清除区域

//清除
pen.clearRect(x,y,w,h)
参数:x,y起点 w,h宽高
//清屏
canvas.width=canvas.width//重新给画布设置宽度,整个界面就清除了,也可以达到清除的效果

图片

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 可选,绘制图片的宽高

//绘制一个等比例缩放图片
思路:Img.width:w=img.height:h

//绘制一个重叠样子的图片
for(var i=0;i<10;i++){pen.drawImage(img,100+20*i,100+20*i)}

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

<script>(function(){var canvas=document.getElementById('canvas')var pen=canvas.getContext('2d')canvas.width=600canvas.height=600canvas.style.border='1px solid blue'var img=new Image()img.src='boy.png'img.onload=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,        index*306/4,        0,        306/4,        130,        200,        200,        306/4,        130        )        index++        index%=4         }    }})()</script>

换姿势画图(重点)

<script>(function(){var canvas=document.getElementById('canvas')var pen=canvas.getContext('2d')canvas.width=600canvas.height=600canvas.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,2)//缩放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>

保存canvas画的图

把canvas画的图片保存为base64编码的内容
toDataURL(‘image/png,1)
参数:1.保存的图片类型 2.保存的图片质量(0-1)

var canvasImage=canvas.toDataURL('image/png',1)document.getElementById('img1').src=canvasImage//使用保存的图片

画布渲染画布: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=600canvas.height=600canvas.style.border='1px solid blue'//把看不见的画完画的画布画到看得见得画布上pen.drawImage(canvasHide,0,0)})()

canvas可以用在设置个页面时钟，画五角星等等。
米店笔记 成都 2017.9.27