canvas

最新推荐文章于 2023-07-05 19:11:54 发布

原创最新推荐文章于 2023-07-05 19:11:54 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#h5 canvas

一、<canvas>是H5新增的元素，可以把它当做是inline-block元素。

<canvas id="canvas1" width="300px" height="300px"></canvas>

可以指定宽高，也可以使用默认值：width="300px",height="150px"。canvas没有其他的可选属性，不考虑CSS会引起的差异，尽量在标签中指定宽高，不使用CSS。

二、<canvas>只支持一种原生图形绘制：矩形

绘制矩形相关的方法(属性)：

fillRect(); //绘制一个填充的矩形

fillStyle; //给填充的矩形添加颜色这个是属性

strokeRect(); //绘制一个矩形边框

clearRect(); //清除一部分区域，使之透明

function drawRect() {
    var canvas1=document.getElementById("canvas1");
    if(!canvas1.getContext) return;
    var ctx1=canvas1.getContext("2d");
    ctx1.fillRect(50,10,50,50);//先填充颜色，默认为黑色
    ctx1.fillStyle="rgb(200,0,0)";
    ctx1.fillRect(200,100,30,30);
    //ctx1.fillStyle="rgb(200,0,0)";
    ctx1.strokeRect(50,70,50,50);//绘制矩形边框
    ctx1.clearRect(60,20,20,20);//清除一部分，使之透明
}

fillStyle要在fillRect()之前，否则就默认填充黑色，如上代码的第一个fillRcet();

strokeRect()绘制矩形边框（边框颜色的改变问题先保留）

clearRect()效果就是第一个矩形中的透明区域。

三、要绘制其他图形，需要绘制路径

路径简单的说就是不同的线段和曲线相连

绘制路径的步骤：

biginPath();//路径开始
moveTo();//指定路径的起点
下一个点；//不同的图形，确定的方法不同
closePath();//关闭路径
stroke();//绘制轮廓
fill();//填充颜色

1.绘制三角形

function drawTri() {
    var canvas2=document.getElementById("canvas2");
    if(!canvas2.getContext) return;
    var ctx2=canvas2.getContext("2d");
    ctx2.beginPath();
    ctx2.moveTo(50,50);
    ctx2.lineTo(100,50);
    ctx2.lineTo(100,100);
    ctx2.closePath();//只是关闭这个路径，但是不会把图形绘制出来
    ctx2.stroke();//绘制图形轮廓。如果没有closePath的话，三角形不会封闭
    ctx2.fill();//填充颜色。默认黑色
}

左图，即时代码对应的图形；中图，没有填充fill()；右图，没有closePath(),路径没有关闭，所以三角形不封闭。

至于填充色，保留。

2.绘制圆弧

绘制圆弧的两个方法：

arc(x,y,radius,startangle,endangle,bool);//x,y起始点坐标，起止角度都用弧度表示，bool为true表示逆时针，fasle顺时针
arcTo(x1,y1,x2,y2,radius);//这个有点深

function drawCircle() {
    var canvas3=document.getElementById("canvas3");
    if(!canvas3.getContext) return;
    var ctx3=canvas3.getContext("2d");
    ctx3.beginPath();
    ctx3.arc(50,10,40,0,Math.PI/2,false);
    ctx3.stroke();

    ctx3.beginPath();
    ctx3.arc(150,50,40,0,-Math.PI/2,true);
    ctx3.closePath();
    ctx3.stroke();

    ctx3.beginPath();
    ctx3.arc(50,100,40,-Math.PI/2,Math.PI/2,false);
    ctx3.fill();

    ctx3.beginPath();
    ctx3.moveTo(200,60);
    ctx3.arcTo(250,60,250,110,50);
    ctx3.lineTo(250,110);
    ctx3.stroke();
}