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)
})()