Canvas学习笔记之画矩形

来源：互联网发布：游戏原画知乎编辑：程序博客网时间：2024/05/18 11:07

Canvas学习笔记之画矩形

步骤

1.使用getElementById()获取canvas元素。
2.获取canvas的绘制环境getContext()。
3.进行绘制画笔的粗细和颜色定义，分别是lineWidth和strokeStyle。
4.告诉系统开始绘制beginPath()，进行绘制坐标重置。
5.使用strokeRect()进行举行路径绘制(并不会填充内部)，或者使用rect()和stroke()先进行路径绘制，然后再使用fillStyle和fille()进行内部填充。

注意事项

1.beginPath()不需要重复调用，如果需要重置绘制路径的坐标的时候可以调用一下。
2.fillStyle()和fill()函数应该跟在绘制的图形后面，不应该放在最后一次性填充，这会导致绘制结果不可控。

代码演示

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>画矩形</title>    </head>    <body>        <canvas id="myCanvas" width="200" height="500">您的浏览器不支持canvas</canvas>        <script>            var c = document.getElementById('myCanvas');            var ctx = c.getContext('2d');            //定义画笔            ctx.lineWidth = 5;            ctx.strokeStyle = '#f00';            //绘制            ctx.beginPath();  //beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。            //直接绘制矩形路径并且带有颜色，不会填充内部。参数分别为起点坐标x和y，矩形长宽，下面的rect函数参数内容也一样。            ctx.strokeRect(10, 10, 70, 40);            //也可以使用下面先画图再上色            ctx.rect(10, 80, 70, 40);            ctx.fillStyle = '#00f'; //填充内部            ctx.fill();            ctx.stroke();            //绘制实心矩形，不会有外层路径            ctx.rect(10, 150, 70, 40);            ctx.rect(10, 220, 70, 40);            //可以看出fill函数会给所有不是stroke的图形填满内部的颜色，所以千万不要在最后才给fill填充内部颜色。正确的使用方法应该是在绘制图形立即跟上绘制的fill函数。            ctx.fillStyle = '#00f';            ctx.fill();        </script>    </body></html>

效果图

阅读全文

0 0