canvas基础

canvas标签

• canvas是html5新增标签，意为画布。
• 属性：widthandheight,canvas标签可以直接在标签上添加画布的宽和高，也可以在内部样式表中添加，不过这样会把画布拉伸。
• canvas有默认的大小为300px and 150px。
• canvas的背景色是透明色。
• canvas画布坐标无限大，当前只是可是窗口。
  

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  //首先获取`canvas`节点 var mycanvas=document.getElementById("mycanvas"); //获取`canvas`画布的上下文 var ctx=mycanvas.getContext("2d"); //新建一个路径（图层） ctx.beginPath(); //画笔的起始点坐标 ctx.moveTo(10,10); //画笔的终点坐标 ctx.lineTo(100,100); //对所画线条进行设置线条颜色 ctx.strokeStyle="red"; //还能设置线宽 ctx.lineWidth=30; //对所画的线条进行渲染 ctx.stroke(); //`当你画的是一个闭合图形时可以填充颜色` ctx.fillStyle="lightgray"; ctx.fill(); //但你花了三个点坐标，需要把这些点闭合时，使用 ctx.closePath(); //为画布设置透明色(0--1之间的小数),单独线条的颜色可以用`rgba()`单独设置 ctx.globalAlpha=0.5;

画直线

1
2
3
4
5

ctx.beginPath();
ctx.moveTo(50,10);
ctx.lineTo(50,100);
ctx.lineWidth=10;
ctx.stroke();

画矩形

• 画矩形有三种方式

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  //`方法一` ctx.beginPath(); // `四个参数分别是：开始的坐标，后两个是要画矩形的长和宽` ctx.fillRect(10,10,100,50); //`方法二` ctx.beginPath(); ctx.strokeRect(20,20,100,50); //`方法三` ctx.beginPath(); ctx.rect(30,30 100,50); ctx.stroke();//到此效果与方法二相同 ctx.fill();//到此效果与方法一相同 //`方法四` ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,100); ctx.lineTo(100,100); ctx.lineTo(100,0); ctx.closePath(); ctx.stroke();//到此效果与方法二相同 ctx.fill();//到此效果与方法一相同

画圆

• 画圆涉及到arc(圆心的坐标,半径,开始的角度,结束的角度,逆时针和顺时针（可选）)

• true逆时针，false顺时针（默认）

  1 2 3 4 5

  //开始画圆 ctx.beginPath(); ctx.arc(100,100,100,0,Math.PI*2); ctx.stroke();//或者默认颜色填充 ctx.fill();

• 关于圆的坐标：
  

  线性渐变与径向渐变

  1 2 3 4 5 6 7 8

  //线性渐变 //四个参数：开始横向渐变开始的坐标，结束横向渐变的坐标 var grd=ctx.createLinearGradient(0,0,mycanvas.width,mycanvas.height); //`addColorStop("渐变总距离的百分比",颜色);` grd.addColorStop(0,"red"); grd.addColorStop(0.5,"blue"); grd.addColorStop(1,"pink"); //例如一个矩形填充上面的颜色,效果如下：

1
2
3
4
5
6
7
8
9

//径向渐变
//参数：径向渐变圆心坐标和半径
var grd=ctx.createRadialGradient(200,200,100,200,200,250);
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(0,0,mycanvas.width,mycanvas.height);
//效果如下：

判断指定点是否在上下文图形上的方法isPointInPath(点的坐标)

• 创建矩形的方法中，方法一和方法二画的矩形不能用此方法判断

  1 2 3 4 5

  if(isPointInPath(10,10)){ console.log("在此图形内"); }else{ console.log("不在图形内"); }

文字设置

• 文字也可以设置颜色和渐变

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  //文字可以设置上下基准线 ctx.textBaseline="middle"; //文字可以设置左右基准线 ctx.textAlign="center"; //可以设置文字的基本样式 ctx.font="20px bold Arial"; var grd=ctx.createLinearGradient(0,0,100,100); grd.addColorStop(0,"blue"); grd.addColorStop(0.5,"pink"); grd.addColorStop(1,"red"); ctx.fillStyle=grd; //参数：文字内容，左下角的基线坐标 ctx.fillText("hello",100,100);//或者 ctx.strokeText("hello",100,100); //效果如下：

拓展小练习

画象棋棋盘

• 画8行8列的黑白格，宽高50px

  1 2 3 4 5 6 7 8 9

  ctx.beginPath(); for(var i=0;i<8;i+=2){ for(var j=0;j<8;j+=2){ ctx.fillStyle="black"; ctx.fillRect(i*50,j*50,50,50); ctx.fillRect(i*50+50,j*50+50,50,50); } } //效果如图：

写字板

• 鼠标按下的同时鼠标移动画出移动线条，鼠标抬起，事件消失

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  mycanvas.onmousedown=function(e){ var evObj=window.event || e; ctx.beginPath(); var x=evObj.clientX-mycanvas.offsetLeft; var y=evObj.clientY-mycanvas.offsetTop; ctx.moveTo(x,y); mycanvas.onmousemove=function(e){ var evObj=e.window.event || e; var x1=evObj.clientX-mycanvas.offsetLeft; var y1=evObj.clientY-mycanvas.offsetTop; ctx.lineTo(x1,y1); ctx.stroke="blue"; } } document.onmouseup=function(){ mycanvas.onmousemove=null; } //效果如下：

太极图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

ctx.beginPath();
ctx.arc(100,100,100,Math.PI/2,Math.PI*1.5);
ctx.fillStyle="black";
ctx.fill();
ctx.beginPath();
ctx.arc(100,100,100,Math.PI/2,Math.PI*1.5,true);
ctx.fillStyle="white";
ctx.fill();
ctx.beginPath();
ctx.arc(100,50,50,0,Math.PI*2);
ctx.fillStyle="black";
ctx.fill();
ctx.beginPath();
ctx.arc(100,150,50,0,Math.PI*2);
ctx.fillStyle="white";
ctx.fill();
ctx.beginPath();
ctx.arc(100,50,15,0,Math.PI*2);
ctx.fillStyle="white";
ctx.fill();
ctx.beginPath();
ctx.arc(100,150,15,0,Math.PI*2);
ctx.fillStyle="black";
ctx.fill();
//效果如下