canvas画布基本知识点总结

最新推荐文章于 2024-05-08 20:50:56 发布

知予猫

最新推荐文章于 2024-05-08 20:50:56 发布

阅读量1.2k

点赞数 3

分类专栏：笔记文章标签： javascript css css3 html5 html

本文链接：https://blog.csdn.net/m0_47966287/article/details/112255402

版权

HTML5的canvas元素使用JavaScript画图；

<canvas width="600" height="400">  </canvas>

canvas画图的基本框架

画布默认背景颜色为白色，大小为300*150；
若要设置画布大小，不建议在style的样式设置尺寸,效果相当于将原本300*150的画布等比例放大缩小，包括里面画的图；
建议在元素本身设置；

<body>
    <!-- 准备画布 -->
    <canvas width="600" height="400"></canvas>
    <!-- 准备绘制工具 -->
    <!-- 利用工具绘图 -->
    <script>
        // 获取元素
        var myCanvas=document.querySelector('canvas');
        // 获取上下文,绘制工具箱
        var ctx=myCanvas.getContext('2d');
        // 移动画笔
        ctx.moveTo(100,100);
        // 绘制直线（轨迹，绘制路径）
        ctx.lineTo(200,100);
        // 描边
        ctx.stroke();
    </script>
</body>

关于线条的问题

默认宽度为1px
默认颜色黑色
但是显示是灰色，2px宽度，原因是对其点是线的中心位置，会把线分成两个0.5px，显示的会是不饱和增加宽度；
解决方法：前或后移动0.5px即可；

当要画多条不同样式的平行线时，存在样式覆盖问题，需要开辟新路径；

<body>
    <canvas width="600" height="400"></canvas>
    <script>
        var myCanvas=document.querySelector("canvas");
        var ctx=myCanvas.getContext("2d");
        // 画平行线
        // 蓝色 10px
        ctx.moveTo(100,100);
        ctx.lineTo(200,100);
        ctx.strokeStyle="blue";
        ctx.lineWidth=10;
        ctx.stroke();
        // 红色 20px
        ctx.beginPath();//开辟新路径
        ctx.moveTo(100,200);
        ctx.lineTo