《JavaScript DOM编程艺术》Canvas画图

最新推荐文章于 2022-10-05 17:14:21 发布

iofe

最新推荐文章于 2022-10-05 17:14:21 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript DOM 编程艺术总结

本文链接：https://blog.youkuaiyun.com/qq_22713749/article/details/79256958

JavaScript DOM 编程艺术总结专栏收录该内容

3 篇文章

订阅专栏

<canvas id='draw-in-me' width='120' height="40">
    <p>Powered By HTML5 canvas</p>
</canvas>
<script>
    window.onload=draw;
    function draw(){
        var canvas = document.getElementById('draw-in-me');
        var ctx=canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(120.0,32.0);
        ctx.bezierCurveTo(120.0,36.4,116.4,40.0,112.0,40.0);
        ctx.lineTo(8.0,40.0);
        ctx.bezierCurveTo(3.6,40.0,0.0,36.4,0.0,32.0);
        ctx.lineTo(0.0,8.0);
        ctx.bezierCurveTo(0.0,3.6,3.6,0.0,8.0,0.0);
        ctx.lineTo(112.0,0.0);
        ctx.bezierCurveTo(116.4,0.0,120.0,3.6,120.0,8.0);
        ctx.lineTo(120.0,32.0);
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 2.0;
        ctx.strokesStyle = "rgb(255,255,255)";
        ctx.stroke();
    }
</script>

HTML5的<canvas>元素，通过它可以动态创建和操作图形图像；

变量ctx引用的是画布的绘图空间（context）.