首页 > 其他分享> 文章详细

Canvas：矩形的绘制

2022-07-24 10:33:40 阅读：160 来源： 互联网

标签：Canvas lineTo ctx height width 矩形绘制 500

矩形的绘制

语法

（1）rect()：在当前子路经添加一条弧线；

语法：context.rect(x,y,width,height);

四个参数：起点坐标x,y：左上角坐标；宽度width：矩形的宽度；高度height：矩形的高度；

（2）strokeRect()方法可以直接绘制一个矩形；

语法：context.strokeRect(x,y,width,height);

（3）fillRect方法用于在画布上绘制已填充的矩形；

语法：“context.fillRect(x,y,width,height);”；

其中，参数“x”和“y”表示矩形左上角的x与y坐标，，“width”和“height”表示矩形的宽度与高度。

矩形

实例：

//线条绘制矩形
            ctx.moveTo(200,300)
            ctx.lineTo(200,500)
            ctx.lineTo(400,500)
            ctx.lineTo(400,300)
            ctx.lineTo(200,300)
            // ctx.closePath()//闭合轨迹 会把线连接到某一点形成闭合轨迹
            ctx.strokeStyle="black"
            ctx.lineWidth=3
            ctx.stroke()

打开注释后效果图相同

颜色填充：

ctx.fillStyle="skyblue"
ctx.fill()//把闭合轨迹填充上颜色默认是黑色

未闭合的矩形填充：

柱状图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <style>
            #box {
                border: 1px gray solid;
            }
        </style>
        <canvas id="box" width="600px" height="600px">
        </canvas>
        <script>
            var canvas = document.querySelector("#box")
            var ctx = canvas.getContext("2d") //Context 上下文            
            var arr=[1000,304,530,607,899,999]
            
            ctx.moveTo(50,500)
            ctx.lineTo(580,500)
            ctx.stroke()
            //y+899/450=500
            let h=450/Math.max(...arr)
            for(var i=0;i<arr.length;i++){
                ctx.beginPath()
                ctx.fillStyle="skyblue"
                //左上角的x坐标和左上角的y坐标，宽，高
                ctx.fillRect(100+i*70,500-h*arr[i],50,h*arr[i])
            }
            
        </script>
    </body>
</html>

标签：Canvas,lineTo,ctx,height,width,矩形,绘制,500
来源： https://www.cnblogs.com/LIXI-/p/16511156.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Canvas：矩形的绘制

矩形的绘制

语法

矩形

柱状图