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=600
canvas.height=600
canvas.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=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,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=600
canvas.height=600
canvas.style.border='1px solid blue'

//把看不见的画完画的画布画到看得见得画布上
pen.drawImage(canvasHide,0,0)
})()

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