html5之canvas的学习

2019-04-20 本文已影响0人 Minka__

html5之canvas的学习

“ web框架的学习中，一部分涉及网站前端的学习，相关内容有html5,CSS,javascript等，那就先从html5开始吧～本期主要记录在学习过程中canvas中不好理解的或好玩的用法”

基础知识

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

应用：通过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

html5之canvas的学习

html5之canvas的学习

猜你喜欢

热点阅读