Html5中使用canvas 实现矩形和线条的绘制

最新推荐文章于 2021-06-25 22:42:20 发布

前端独秀

最新推荐文章于 2021-06-25 22:42:20 发布

阅读量507

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jh1abaaaa&title=Html5%E4%B8%AD%E4%BD%BF%E7%94%A8canvas+%E5%AE%9E%E7%8E%B0%E7%9F%A9%E5%BD%A2%E5%92%8C%E7%BA%BF%E6%9D%A1%E7%9A%84%E7%BB%98%E5%88%B6

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

HTML5中通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla。通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。可以使用 lineWidth属性改变线条粗细。

让我们看看使用了fillRect,strokeRect clearRect 和其他的例子：

 
       context.fillStyle   = ‘ 
       #00f’; // blue    
      
       context.strokeStyle = ‘ 
       #f00′; // red    
      
       context.lineWidth   = 4;    
      
       // Draw some rectangles.    
      
       context.fillRect  (0,   0, 150, 50);    
      
       context.strokeRect(0,  60, 150, 50);    
      
       context.clearRect (30, 25,  90, 60);    
      
       context.strokeRect(30, 25,  90, 60);

路径

通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用 beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。下面是一个绘制三角形的例子:

 
       // Set the style properties.    
      
       context.fillStyle   = ‘ 
       #00f’;    
      
       context.strokeStyle = ‘ 
       #f00′;    
      
       context.lineWidth   = 4;    
      
       context.beginPath();    
      
       // Start from the top-left point.    
      
       context.moveTo(10, 10);  
       // give the (x,y) coordinates    
      
       context.lineTo(100, 10);    
      
       context.lineTo(10, 100);    
      
       context.lineTo(10, 10);    
      
       // Done! Now fill the shape, 和 draw the stroke.    
      
       // Note: your shape will not be visible until you call any of the two methods.    
      
       context.fill();    
      
       context.stroke();    
      
       context.closePath();