首页 > 代码库 > 02 Canvas 入门

02 Canvas 入门

<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用widthheight属性指定画布内容的宽高,单位只能是像素

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

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

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

02 Canvas 入门