canvas绘制基础

初始接口

<body>
<canvas id=“canvas”></canvas>
<script>
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
//使用content进行绘制
</script>
</body>

直线绘制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #ddd; margin: 0 auto"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 1024;
        canvas.height = 768;
        //绘制的接口
        var context = canvas.getContext("2d");

        //Draw a line
        //意图绘制，状态绘制
        //路径定义的首尾
        context.beginPath();
        context.moveTo(100, 100);//笔尖
        context.lineTo(700, 700);//笔尾
        context.lineTo(100, 700);
        context.lineTo(100, 100);
        context.closePath();
//      context.fillStyle = "rgb(2,100,30)";
//      //填充颜色
//      context.fill();
        //线条的宽度
        context.lineWidth = 5;
        //线条的样式
        context.strokeStyle = "#058";
        //具体绘制
        //笔画
        context.stroke();

        
        context.beginPath();
        context.moveTo(200, 100);
        context.lineTo(700, 600);
        context.closePath();
        context.strokeStyle = "black";
        context.stroke();
        //canvas是基于状态绘制的


    }
</script>
</body>
</html>

方法

context.beginPath();

context.moveTo();

context.lineTo();

context.closePath();

context.fill();

context.stroke();

属性

context.fillStyle;

context.strokeStyle

context.lineWidth