02 Canvas 入门

Posted 2020-09-28 Nicole

<canvas id="demo" width="600px" height="600px">
        ie9以上才支持
    </canvas>
    <script>
        //1.拿到canvas标签
        var canvas = document.getElementById(‘demo‘);

        canvas.style.border="1px solid red";

        //2.拿到canvas的上下文
        var ctx = canvas.getContext(‘2d‘);

        //3.绘制
        ctx.moveTo(100,100);
        ctx.lineTo(200,100);
        ctx.lineTo(100,200);
        //ctx.lineTo(100,100);

        //闭合
        ctx.closePath();

       //边框样式
        ctx.lineWidth=4;
        ctx.strokeStyle="red";

       //开始描边
        ctx.stroke();

       //填充
        ctx.fillStyle="skyblue";
        ctx.fill();
    </script>

注意：

• Canvas用width和height属性指定画布内容的宽高，单位只能是像素

• CSS的width和height可以改变Canvas元素的宽高，但是其内容会被等比例拉伸

• Canvas的width和height被变更时，Canvas上已有的任何绘图都会被清除

• Context对象就是javascript操作Canvas的接口，Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的