html+js：画布canvas + 绘制简单矩形

真实lie

已于 2022-04-16 21:56:58 修改

阅读量793

点赞数 1

分类专栏： html js 文章标签： html javascript

于 2022-04-16 19:22:21 首次发布

本文链接：https://blog.csdn.net/qq_52824207/article/details/124218544

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

html5支持canvas标签

canvas创建一个画布，通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canvas 参考手册查询

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title>画布canvas测试</title>
        <style>
            body{
                text-align: center;
            }
            #view{
                /* height: 500px;
                width: 500px; */
                /* canvas的宽度和高度设置在标签内，否则线条会变粗颜色变淡 */
                background-color: antiquewhite;
                border: 1px red solid;
                border-radius: 25px;
            }
        </style>
    </head>
    <body>
        <h1>画布canvas测试</h1>
        <canvas id="view" width="500px" height="500px"></canvas>
    </body>
    <script type="text/javascript">
        var conv=document.getElementById("view");
        var ctx=conv.getContext("2d");

        function drawBox(x,y,color){
            ctx.beginPath();//开始新的路径（丢弃当前路径）
            ctx.lineWidth=3;//线条宽度（单位：像素）
            ctx.moveTo(x,y);//起点坐标
            ctx.lineTo(x+100,y);//设置直线路径，终点坐标
            ctx.lineTo(x+100,y+100);
            ctx.lineTo(x,y+100);
            ctx.lineTo(x,y);
            ctx.strokeStyle="red";//设置路径颜色（先设置后绘制）
            ctx.stroke();//绘制路径
            ctx.fillStyle=color;//设置填充颜色
            ctx.fill();//填充路径（强制闭合）
        }//绘制函数

        drawBox(20,20,"#00FF00");
    </script>
</html>

这个例子绘制了一个简单的矩形，并填充了内部颜色（具体请见注释）

特别说明：

1.canvas创建标签内设置宽度，不要在style或者外部css内设置，否则绘制时线条宽度和颜色不会正确显示

2.在canvas画布加载完后使用getContext方法创建2d对象，不论使用外部js或者内部script代码都需要放在canvas标签之后

3.beginPath方法在创建2d对象时会自动执行一次，如果需要多次绘制则每次都需要使用。

ps：个人建议只要开始绘制就使用一次（防止一次绘制时不使用没问题，多次绘制出问题忘记使用找半天原因）

真实lie

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+js：画布canvas + 绘制简单矩形

html5支持canvas标签canvas创建一个画布，通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canvas 参考手册查询完整代码（之后只列出js部分）：<!DOCTYPE html><html> <head> <title>画布canvas测试</title> <style>
复制链接

扫一扫