html5 canvas 学习

Posted 2020-06-11

1.定义画布，取得画布上下文下文

 <canvas id="canvas"></canvas>

js:

var cvs = document.getElementById("canvas");
        var context = cvs.getContext(‘2d‘);
        cvs.width = 1000;
        cvs.height = 600;

2.绘制一条直线

context.moveTo(100, 100);
context.lineTo(300, 200);
context.strokeStyle="red";//笔刷颜色，填充颜色用 .fillStyle
context.lineWidth=10;//笔刷宽度
context.stroke();//填充用.fill()方法

如果要绘制多条线段 ，并且分别对线段指定样式，但最终显示都是最后指定的一个样式，这是因为canvas是状态绘制，所以对每个线段绘制可都应该用beginPath方法来告知是一个全新绘制就没有问题了

context.lineWidth = 10;

        context.beginPath();
        context.lineTo(100, 100);
        context.lineTo(300, 200);
        context.lineTo(100, 300);
        context.strokeStyle = "#003399";
        context.stroke();

        context.beginPath();
        context.moveTo(300, 100);
        context.lineTo(600, 200);
        context.lineTo(300, 300);
        context.strokeStyle = "#330022";
        context.stroke();

以上线段没有首尾闭合，如要闭合添加context.closePath()即可。

注意，context.beignPath()与context.closePath()不是一定要成对出现的，只要线段间需要闭合时才使用closePath

3.画矩形方法

context.rect(100, 100, 200, 200);
context.fill()//或context.stroke()

context.fillRect(100, 100, 200, 200);

context.strokeRect(100, 100, 200, 200);

对fillStyle样式可以指定颜色，还可以指定透明度：

        context.lineWidth = 10;
        context.beginPath();
        context.fillStyle = "red";
        context.fillRect(100, 100, 300, 300);
       
        context.beginPath();
        context.fillStyle = "rgba(0, 255, 0, 0.5)";
        context.fillRect(200, 200, 300, 300);

 

4.直线两端的样式：context.lineCap="round",值分别可以butt(默认),round,square,注意使用round和square会比默认的多出来一小段长度，

直线与直线相交的形式：context.lineJoin,值分别：miter(默认)|bevel|round .如果绘制的角很尖时，还需要考虑另一个值：  cxt.miterLimit = 20;默认值为10

5.画五角形，函数如下：

function drawStar(cxt, x, y, outerR, innerR, rot) {
             cxt.beginPath();
             for (var i = 0; i < 5; i++) {
                 cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outerR+x,
                 -Math.sin((18+i*72-rot)/180*Math.PI)*outerR+y);
                 cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * innerR + x,
                     -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * innerR + y);
             }
             cxt.closePath();

             cxt.fillStyle = "#fb3";
             cxt.strokeStyle = "#fd5";
             cxt.lineWidth = 3;
             cxt.lineJoin = "rount";

             cxt.fill();
             cxt.stroke();
         }

在画布上添加200个五角星

for (var i = 0; i < 200; i++) {
                 var r = Math.random() * 10 + 10;
                 var x = Math.random() * cvs.width;
                 var y = Math.random() * cvs.height;
                 var a = Math.random() * 360;
                 drawStar(context, x, y, r, r / 2.0, a);
             }

 6.图形变换：tanslate,rotate,scale

如果对图形时行多次变换，最终结果可能会与实现想象中有差异，最好使用context.save()和context.restore(),这里context.save();和context.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的

        context.translate(100, 0),是向右移动100个像素，如果没有save和restore，会对多次出现的平移进行叠加

context.scale(x,y),缩放使用可注意，它不仅对图形大小时行缩放，还会对边框和起点坐标也会一起缩放，所以使用scale一定要注意。

如果绘制起点设置在(0,0)坐标开始绘制，那缩放将对起点不起任何作用，这样就可能可保证起点不发生改变，此时tanslate移动起点是正确的显示器。