Canvas学习（二）：绘制特殊矩形

来源：互联网发布：网络洗脑神曲编辑：程序博客网时间：2024/04/30 16:56

同时绘制有边框和填充色的矩形

<!DOCTYPE HTML><html><body><div class="" style="margin:180px 50px"><canvas id="myCanvas" width="500" height="300" style="border:1px solid red;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.strokeStyle = 'green';//边框色ctx.fillStyle = 'red'//填充色ctx.lineWidth = 4;//边框宽度// 路径绘制ctx.beginPath();ctx.moveTo(20,20);ctx.lineTo(110,20);ctx.lineTo(110,110);ctx.lineTo(20,110);ctx.closePath();ctx.stroke();ctx.beginPath();ctx.moveTo(22,22);ctx.lineTo(108,22);ctx.lineTo(108,108);ctx.lineTo(22,108);ctx.closePath();ctx.fill();// rect()绘制ctx.beginPath();ctx.rect(130,20,100,90);ctx.closePath();ctx.stroke();ctx.beginPath();ctx.rect(132,22,96,86);ctx.fill();// strokeRec和tfillRectctx.strokeRect(250,20,100,90);ctx.fillRect(252,22,96,86);</script></body></html>

绘制折角或圆角矩形

lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。lineJoin属性，w3c用法链接

<script type="text/javascript">      var c=document.getElementById("myCanvas");      var ctx=c.getContext("2d");      ctx.strokeStyle = 'green';//边框色      ctx.fillStyle = 'red'//填充色      ctx.lineWidth = 8;//边框宽度        ctx.lineJoin = "bevel";        ctx.strokeRect(20,20,200,200);        ctx.lineJoin = "round";        ctx.strokeRect(250,20,200,200);//fillRect()则会是填充形状  </script>

清除矩形

clearRect() 方法清空给定矩形内的指定像素。clearRect()方法，w3c用法链接

clearRect() 方法清空给定矩形内的指定像素。

JavaScript 语法：context.clearRect(x,y,width,height);参数描述x要清除的矩形左上角的 x 坐标。y要清除的矩形左上角的 y 坐标。width要清除的矩形的宽度，以像素计。height要清除的矩形的高度，以像素计。

  <script type="text/javascript">      var c=document.getElementById("myCanvas");      var ctx=c.getContext("2d");      ctx.strokeStyle = 'green';//边框色      ctx.fillStyle = 'red'//填充色      ctx.lineWidth = 8;//边框宽度      ctx.fillStyle="red";      ctx.fillRect(20,20,200,150);      ctx.clearRect(30,30,100,50);  </script>

1 0