html5之canvas的学习
“ web框架的学习中，一部分涉及网站前端的学习，相关内容有html5,CSS,javascript等，那就先从html5开始吧～本期主要记录在学习过程中canvas中不好理解的或好玩的用法”
01
基础知识
clip()
作用：从初始画布中剪切任意区域Ａ。在clip()之后的绘图操作只能显示出在Ａ区域内的部分。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Picture</title>
</head>
<body>
<canvas id="mycanvas" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
//先画一个圆形,然后通过clip()剪切
ctx.strokeStyle="blue"
ctx.beginPath();
ctx.arc(150,150,100,0,Math.PI*2,true)
ctx.stroke();
ctx.clip();
//clip()之后作的图只能显示出在上面圆内的部分。
ctx.fillStyle="red";
ctx.fillRect(0,0,150,150);
</script>
</body>
</html>
效果：(第一个是在画矩形之前有clip(),第二个在画矩形操作之前没有clip())
image
image
应用：通过clip()我们可以修改一张图形的形状。
image
arcTo()的理解
作用：画两个切线之间的弧线。arcTo()的参数是五个数值,前四个代表两个点[(x1,y1),(x2,y2)],最后一个参数代表弧的半径。
理解：通过当前点 (通过moveTo(x,y)将光标移动到特定的点)与（x1,y1)点连成的直线，以及(x1,y1)与(x2,y2)连成直线，把这两个直线看作切线，根据半径画出弧线。
起点必须要用moveTo()设置,并不是不设置就默认(0,0)～
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.fillText('A点',20,18);
ctx.lineTo(350,50);
ctx.fillText('B点',350,48);
ctx.lineTo(200,150);
ctx.fillText('C点',200,156);
ctx.strokeStyle="black";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,20);
ctx.strokeStyle="red";
ctx.arcTo(350,50,200,150,80);
ctx.stroke();
</script>
效果：（可以看出弧线参数里的Ｂ点和Ｃ点到底是如何发挥作用的）
image
移动坐标translate()、旋转rotate()
作用：移动坐标原点。默认以画布的(0,0)为原点，translate(dx,dy)分别为在水平和垂直方向的偏移量，从而获得新的坐标原点。也就是说，dx和dy是在前一个坐标上的基础上确定的。
注意：关于translate()的参数并不能简单理解为新原点的坐标。常与save()搭配使用。例如：已经通过translate()修改了坐标，那么再次修改坐标原点的时候，需要在前面加上save()。
rotate()里参数为弧度，这里Math.PI就是指3.1415..
<script type="text/javascript">
var ctx=document.getElementById("mycanvas").getContext("2d");
ctx.beginPath();
ctx.arc(150,150,130,0,Math.PI*2,true);
ctx.fill();
ctx.clip();
//通过重复的修改坐标原点从而进行图形循环
ctx.translate(200,20);
for (var i=1;i<90;i++){
ctx.save();
ctx.translate(30,30);
ctx.scale(0.95,0.95);
ctx.rotate(Math.PI/12);
ctx.beginPath();
ctx.fillStyle="red";
ctx.globalAlpha="0.4";
ctx.arc(0,0,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
</script>
image
渐变色的使用
线性渐变：先使用createLinearGradient()创建一个canvasGradient对象，然后用addColorStop()进行上色。
addColorStop(stop,color)，参数stop指0~1之间的数字，代表在渐变长度的相对位置。color为设置相应的颜色。
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var grd = ctx.createLinearGradient(0,0,0,300);
grd.addColorStop(0,"red");
grd.addColorStop(1/2,"blue");
grd.addColorStop(1,"black");
ctx.fillStyle=grd;
ctx.fillRect(0,0,300,300);
ctx.fillRect(400,0,300,300);
var grd1 = ctx.createLinearGradient(0,500,300,500);
grd1.addColorStop(0,"red");
grd1.addColorStop(1/2,"blue");
grd1.addColorStop(1,"black");
ctx.fillStyle=grd1;
ctx.fillRect(0,500,300,300);
ctx.fillRect(400,500,300,300);
var grd2 = ctx.createLinearGradient(0,1000,300,1300);
grd2.addColorStop(0,"red");
grd2.addColorStop(1/2,"blue");
grd2.addColorStop(1,"black");
ctx.fillStyle=grd2;
ctx.fillRect(0,1000,300,300);
ctx.fillRect(400,1000,300,300);
</script>
对于createLinearGradient()的参数，列举三种情况，分别是开始点和结束点连成的直线平行于ｙ轴、ｘ轴和不平行ｘ或ｙ轴。结果如下：
image
所以，绘制渐变的参数和最后绘制的矩形的位置要注意，找到在哪个方向的颜色是无限延长的～
应用：
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var grd = ctx.createLinearGradient(100,100,350,100);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"blue");
grd.addColorStop(0.7,"purple");
grd.addColorStop(1,"black");
ctx.shadowOffsetX=3;
ctx.shadowOffsetY=3;
ctx.shadowBlur=2;
ctx.shadowColor="rgba(0,0,0,0.8)";
ctx.fillStyle=grd;
ctx.font="40px Verdana";
ctx.fillText("HELLOWORLD",100,200);
ctx.strokeStyle=grd;
ctx.font="50px 宋体";
ctx.strokeText("周末快乐",230,250);
</script>
image
图片反显
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var img = new Image();
img.src='images/2.jpeg';
img.onload=function() {
ctx.drawImage(img,0,0);
var imagedata = ctx.getImageData(0,0,img.width,img.height);
for (var i=0,n=imagedata.data.length ; i<n ; i+=4){
imagedata.data[i+0] = 255-imagedata.data[i+0];
imagedata.data[i+1] = 255-imagedata.data[i+1];
imagedata.data[i+2] = 255-imagedata.data[i+2];
}
ctx.putImageData(imagedata,img.width,0);
}
</script>
image
02
TIPS
-
在重新开始一个新路径的时候要记得使用beginPath()。
-
fillRect()是用来画矩形的，四个参数分别是（左上点）起点ｘ，起点ｙ，宽度和高度。可不是起点和终点坐标呦！
欢迎我的公众号：听见我的voices
网友评论