HTML5 canvas基础制图之绘图矩形框

日期:2021-01-20 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

<canvas></canvas>只是1个绘图图型的器皿,除id、class、style等特性外,也有height和width特性。在<canvas>>元素上制图关键有3步:

1.获得<canvas>元素对应的DOM目标,这是1个Canvas目标;
2.启用Canvas目标的getContext()方式,获得1个CanvasRenderingContext2D目标;
3.启用CanvasRenderingContext2D目标开展制图。

绘图矩形框rect()、fillRect()和strokeRect()

 •context.rect( x , y , width , height ):只界定矩形框的相对路径;
 •context.fillRect( x , y , width , height ):立即绘图出填充的矩形框;
 •context.strokeRect( x , y , width , height ):立即绘图出矩形框边框;

JavaScript Code拷贝內容到剪贴板
  1. <script type="text/javascript">   
  2.     var canvas = document.getElementById("canvas");   
  3.     var context = canvas.getContext("2d");   
  4.   
  5.     //应用rect方式   
  6.     context.rect(10,10,190,190);   
  7.     context.lineWidth = 2;   
  8.     context.fillStyle = "#3EE4CB";   
  9.     context.strokeStyle = "#F5270B";   
  10.     context.fill();   
  11.     context.stroke();   
  12.   
  13.     //应用fillRect方式   
  14.     context.fillStyle = "#1424DE";   
  15.     context.fillRect(210,10,190,190);   
  16.   
  17.     //应用strokeRect方式   
  18.     context.strokeStyle = "#F5270B";   
  19.     context.strokeRect(410,10,190,190);   
  20.   
  21.     //另外应用strokeRect方式和fillRect方式   
  22.     context.fillStyle = "#1424DE";   
  23.     context.strokeStyle = "#F5270B";   
  24.     context.strokeRect(610,10,190,190);   
  25.     context.fillRect(610,10,190,190);   
  26. </script>   
  27.   

这里必须表明两点:第1点便是stroke()和fill()绘图的前后左右次序,假如fill()后边绘图,那末当stroke边框较大时,会显著的把stroke()绘图出的边框遮挡住1半;第2点:设定fillStyle或strokeStyle特性时,能够根据“rgba(255,0,0,0.2)”的设定方法来设定,这个设定的最终1个主要参数是全透明度。

此外也有1个跟矩形框绘图相关的:消除矩形框地区:context.clearRect(x,y,width,height)。
接受主要参数各自为:消除矩形框的起止部位和矩形框的宽和长。
在上面的编码中绘图图型的最终再加:

context.clearRect(100,60,600,100);

能够获得下列实际效果:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。