canvas画布基本操作

最新推荐文章于 2023-08-01 09:00:00 发布

VIP文章阿渡渡渡渡渡渡

最新推荐文章于 2023-08-01 09:00:00 发布

阅读量220

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/qq_44867271/article/details/106646999

版权

简单画直线和三角形（结合注释）–线条绘制

<body>
    <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
        当前浏览器不支持canvas，请更换浏览器后再试
    </canvas>
        
    <script>
        // canvas是基于状态绘制的
        window.onload = function () {
   
            /** @type {HTMLCanvasElement} */
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d'); // 得到绘图的上下文环境 使用context绘制

            // 绘图第一步 状态设置
            context.moveTo(100, 100);
            context.lineTo(700, 700); // 1 + 2 一条直线
            context.lineTo(100, 700);
            context.lineTo(100, 100); // 1 + 2 + 3 + 4 一个三角形
            context.lineWidth = 5; //线条宽度
            context.strokeStyle = "blue"; //线条样式 可以使用css任意方法赋值
            //绘制
            context.stroke(); // 笔划，用于绘制线条
        }
    </script>
</body>

效果
在这里插入图片描述

着色绘制

<body>
    <canvas id="canvas"

最低0.47元/天解锁文章

阿渡渡渡渡渡渡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas画布基本操作

简单画直线和三角形（结合注释）–线条绘制<body> <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: 50px auto;"> 当前浏览器不支持canvas，请更换浏览器后再试 </canvas> <script> // canvas
复制链接

扫一扫