canvas是H5的新标签在页面上绘制图形用的(通常也称他画布),canvas只是一个容器,我们用JS脚本来控制他
语法:
<canvas id="draw" width="600" height="500"></canvas>
这是一个宽600px 高500px的canvas画布
在canvas的原型中有很多公有的方法和属性,下面来详细介绍canvas中几款常用的方法
首先来说一下使用canvas的步骤
先获取canvas标签
var draw=document.getElementById("draw");第一步先创建(设置)绘制环境,2d绘制视图(目前不支持3D)
var cvs=draw.getContext("2d")"cvs"这个就是你的画板,接下来就可以在cvs操作并进行绘制
常用的属性和方法
cvs.fillStyle 填充的样式
cvs.strokeStyle 触笔(或边框)的颜色
cvs.lineWidth 边框的宽度
绘制图形有两种方式cvs.fill( ) 填充
cvs.stroke() 边框
色值color一共4种色值:
1.颜色名字如:"red"
2.十六进制如:"#ff6700"
3.三色值:rgb(255,255,255);
4.四色值:rgba(255,255,255,0.4)
在canvas中较为常用,几乎所有支持颜色的属性都支持这四种方法,甚至在多色渐变等场景中还可以混用
坐标以画布为准,距离画布上下距离是Y坐标值,距离画布的左右的距离是X坐标cvs.moveTo(x,y) 起始点的坐标 cvs.lineTo(x,y) 结束点坐标如果没有moveTo就把上一个挨着的lineTo作为起始坐标,假如第一个不是moveTo而是lineTo,那么lineTo就是起始坐标
起笔/封笔cvs.beginPath() 开始下笔 设置一个新路径 cvs.closePath() 収笔 关闭当前路径 自动闭合,从结束坐标值到起始坐标自动连接小例子: function draw1() {
var draw = document.getElementById("draw");
var cvs = draw.getContext("2d");
cvs.beginPath();
cvs.moveTo(50,50);
cvs.lineTo(150,50);
cvs.closePath();
cvs.strokeStyle="red";
cvs.lineWidth=20;
cvs.stroke();//以边框的形式显示出来
}
draw1();
css中有圆角border-radius,canvas中也有
设置线条交汇处的样式
cvs.lineJoin
他有三个属性 尖角miter 斜角bevel 圆角round
设置一条线两端的样式
cvs.lineCap 三个属性 butt(默认 平角) round(圆角) square(方角)
矩形填充
填充矩形
cvs.fillRect(x,y,w,h);x,y这个矩形左上角的坐标
w,h 这个矩形的宽,高
注意:边框是从中间往两边算的,一半在里面,一半在外边
清除矩形某部分,清除的还是矩形cvs..clearRect(20,100,40,40) 参数同设置矩形相同
用canvas画圆 arc属性
cvs.arc(x,y,r,star,end,n);x,y: 表示圆心坐标
r : 表示圆的半径
star : 表示其实角度,以弧度计算(默认三点钟方向表示0度)
end : 结束角
n: 表示是否逆时针 ture/false 默认值(false 顺时针)
例子: function draw2(){
cvs.fillStyle="orangered";
cvs.beginPath();
cvs.arc(200,200,40,0,2*Math.PI);
cvs.closePath();
cvs.fill();
cvs.strokeStyle="yellow";
cvs.lineWidth=40;
cvs.beginPath();
cvs.arc(200,200,60,0,2*Math.PI);
cvs.closePath();
cvs.stroke();
}
draw2();
>```
每次调用fill的时候,会将当次路径的其实点和结束点分别连接,填充闭合部分,所以说,以后在写每次路径结束的时候,记得关闭当前路径
function draw3(){
cvs.strokeStyle="#ff6700";
cvs.beginPath();
cvs.lineWidth=2;
cvs.arc(100,100,100,0,Math.PI/2);
cvs.stroke();
cvs.fillStyle="yellow";
cvs.arc(300,300,80,0,Math.PI/2);
cvs.closePath();
cvs.fill();
//每次调用fill的时候，会把当次路径的起始点和结束点分别连接，填充闭合部分
//所以说，以后再写每次路径结束的时候，记得关闭当前路径
}
draw3();
颜色渐变
线性渐变
var CLG=cvs.createLinearGradient(x0,y0,x1,y1) CLG.addColorStop(n,m)x0: 表示渐变开始的x坐标
y0: 表示渐变开始的Y坐标
x1: 表示渐变结束的X坐标
y1: 表示渐变结束的Y坐标
n: 表示设置颜色的偏移量
m: 颜色例子: function draw1(){
var CLG=cvs.createLinearGradient(0,0,0,200);
CLG.addColorStop(0,"red");
CLG.addColorStop(0.25,"yellow");
CLG.addColorStop(0.5,"#ccc");
CLG.addColorStop(0.75,"yellow");
CLG.addColorStop(1,"red");
cvs.fillStyle=CLG;
cvs.fillRect(0,0,200,200);
}
draw1();
径向渐变,发散性渐变(从中间到两边)
cvs.createRadialGradient(x0,y0,r0,x1,y1,r1)x0: 表示发散渐变开始中心的X坐标
y0: 表示发散渐变开始中心的Y坐标
r0: 表示发散渐变开始的半径
x1: 表示发散渐变结束中心的X坐标
y1: 表示发散渐变结束中心的Y坐标
r1: 发散结束的半径例子:
function draw2(){
//CRG=cvs.createRadialGradient(200,200,100,200,200,10);
var CRG=cvs.createRadialGradient(200,200,10,200,200,100)
CRG.addColorStop(0,"#000");
CRG.addColorStop(0.5,"orange");
CRG.addColorStop(1,"red");
cvs.fillStyle=CRG;
cvs.fillRect(100,100,200,200);
}
//draw2();
阴影shadow
cvs.shadowOffsetX;表示阴影的横向偏移量(默认是0)
cvs.shadowOffsetY表示阴影的纵向偏移量(默认是0)
cvs.shadowColor阴影颜色
cvs.shadowBlur阴影的模糊范围(值越大越模糊)function draw1(){
cvs.shadowColor="#0000ff";
cvs.shadowOffsetX=30;
cvs.shadowOffsetY=20;
cvs.shadowBlur=20;
cvs.fillStyle="#449FDB";
cvs.fillRect(50,50,100,100);
}
draw1();
绘制文本
设置字体样式:
cvs.font="字体大小font-size font-family";水平对齐方式
cvs.textAlign="" 属性值:start,end,right,center垂直对齐方式
cvs.textBaseline="" 属性值: top,middle,hanging,bottom,alphabetic,ideographic计算文本宽度
var text="12565" var length=cvs.measureText(text);填充文字
cvs.fillText(text,x,y);绘制文字轮廓
cvs.strokeText(text,x,y) text:文本内容 x,y:文字内容function draw3(){ 例子:
var CLG =cvs.createLinearGradient(0,150,450,250);
CLG.addColorStop(0,"red");
CLG.addColorStop(0.25,"yellow");
CLG.addColorStop(0.5,"green");
CLG.addColorStop(0.75,"yellow");
CLG.addColorStop(1,"red");
var text="hello world";
cvs.fillStyle=CLG;
cvs.shadowOffsetX=5;
cvs.shadowOffsetY=4;
cvs.shadowColor="#FFb6c1";
cvs.shadowBlur=5;
cvs.font="40px cursive";
cvs.textAlign="start";
cvs.textBaseline="top";
cvs.fillText(text,20,120);
var wid=cvs.measureText(text).width;
cvs.fillText("Zitichangduwei:"+wid,0,170);
}
draw3();
绘制图片
cvs.drawImage(Image,x,y,w,h)Image:就是可以放在Dom中的真实图片,可以是动态创建,也可以获取页面上现有的
**X,Y: **图片左上角的坐标
W,H:绘制图片的宽高
图片的截取
cvs.drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh);
**sx,sy:** 图片左上角的坐标
**sw,sh:** 矩形区域的宽高，用来截取图片
**dx,dy:** 截取出来放在canvas上的坐标
**dw,dh:** 画在canvas上的宽高
**sx,sy,sw,sh:** 是截取图片的过程
**dx,dy,dw,dh:** 把截取出的图片放在canvas上的过程
例子: function draw1(){
var img=new Image();
img.src="img/default.gif";
img.onload=function(){
cvs.drawImage(this,0,100,100,75)
}
}
//draw1();
function draw2(){
var img=new Image();
img.src="img/1.jpg";
img.onload=function(){
cvs.drawImage(this,480,150,440,410,0,0,200,200);
cvs.drawImage(this,70,80,400,400,200,0,200,200);
cvs.drawImage(this,480,150,440,410,400,0,200,200);
cvs.drawImage(this,70,80,400,400,600,0,200,200);
}
}
//draw2();
设置平铺
cvs.createPattern(Image,type)Image:就是可以放在DOM中的真实图片,可以动态创建,也可以获取页面上的
type: no-repeat不平铺 ,repeat 全方向平铺
repeat-x x轴方向平铺
repeat-y y轴方向平铺例子 function draw3(){
var img=new Image;
img.src="img/default.gif";
img.onload=function(){
var rep=cvs.createPattern(this,"repeat");
cvs.fillStyle=rep;
cvs.fillRect(0,0,draw.width,draw.height)
}
}
draw3()
>```
画布的平移/旋转/缩放
注意：平移，缩放，旋转这些都是对原始坐标操作的
平移：
cvs.translate(x,y);
**x:**坐标原点向x轴平移的距离
y:坐标原点向y轴平移的距离
缩放：vas.scale(x0,y0);
x0:x轴按照x0的比例缩放
y0:y轴按照y0的比例缩放
旋转：cvs.rotate(angle);
angle:坐标轴转的角度(跟画圆的弧度计算是一样的)
例子function draw2(){
cvs.scale(1,2);
cvs.fillStyle="#800080";
cvs.fillRect(100,50,100,50)
}
//draw2();
图形组合
cvs.globalCompositeOperation=type;
type的值:
1.source-over：默认值 在原来的图形上绘制新图(覆盖的意思)
2.destination-over:在原来的图形下面绘制新图
3.source-in:显示交集，颜色就是新图的颜色
4.source-out:显示的新图非交集部分
5.destination-in：显示交集，颜色就是旧图的颜色
6.destination-out:显示的旧图非交集部分
7.source-atop:显示旧图和交集部分， 交集是新图的颜色
8.destination-atop:显示新图和交集部分，交集是旧图的颜色
9.lighter:全部显示，交集是二者颜色叠加
10.xor:显示全部非交集部分
11.copy：只显示新图
小例子:
var draw = document.getElementById("draw");
var cvs = draw.getContext("2d");
var img = new Image;
img.src = "img/11.png";
img.onload = function() {
var width = this.width / 10;
var height = this.height;
var i = 0;
window.setInterval(function() {
cvs.clearRect(0,0,draw.width,draw.height)
cvs.drawImage(img, i * width, 0, width, height, 0, 0, width, height);
if(i == 9) {
i = 0
} else {
i++
}
}, 200);
}