HTML canvas画布 | 易学教程

设置一个画布<canvas id="mycanvas" accesskey="o" width="1000" height="1000"></canvas>

获取canvas对象，接下来我们就可以进行操作了

   var c = document.getElementById("mycanvas");
   var ctx = c.getContext("2d");

画线

    //用于画线
    ctx.moveTo(90, 90);//起始点
    ctx.lineTo(180, 190);//结束点
    ctx.stroke();//绘画（个人理解）
    //用于画线

写字

    //用于写字
    ctx.fillStyle ="blue";//字体颜色
    ctx.font = "30px  Arial";//字体样式
    ctx.fillText("道德经", 400, 400);//实心文字

    ctx.strokeStyle = "red";//空心字体边框颜色
    ctx.shadowBlur = 10;//阴影
    ctx.shadowColor = "black";//阴影颜色
    ctx.strokeText("论语", 450, 450);//空心文字
    ctx.fillStyle = "orange";//字体颜色
    ctx.fillText("论语", 450, 450);//实心文字
    //用于写字

画矩形

    var grd = ctx.createLinearGradient(0,0, 100, 100);//设置渐变颜色
    grd.addColorStop(0, "red");//从红色到白色
    grd.addColorStop(1, "white");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 80, 80);//x坐标,y坐标,宽,高

画圆

 //用于画圆
    ctx.beginPath();//开始一个新路径
    ctx.arc(230, 230, 50, 0, 2 * Math.PI, false);//开始点x坐标,开始点y坐标,半径,开始绘制的角度，结束绘制的角度
    ctx.fillStyle = "yellow";
    ctx.fill();//填充颜色
    ctx.stroke();
    //用于画圆

其他圆实例：https://blog.csdn.net/qq_37056728/article/details/89210915

添加图片：

ctx.drawImage(document.getElementById("myimage"), 600, 10)//添加图片

其他常用函数：https://www.runoob.com/tags/ref-canvas.html

来源：https://www.cnblogs.com/daimaxuejia/p/12448246.html

标签

canvas