×

canvas绘制锯齿矩形

作者:cidy20172017.10.09来源:Web前端之家浏览:12796评论:0
关键词:canvas

H5的canvas使用Javascript在网页上绘制图形,今天分享下canvas绘制锯齿矩形的效果。如下图效果:

201631154208009.png

代码如下:

<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>锯齿图title>     
       <script type="text/javascript">
       window.addEventListener("load", eventWindowLoaded, false);    
       function eventWindowLoaded(){    
           var x,y;    
           var theCanvas = document.getElementById("canvas");    
           var context = theCanvas.getContext("2d");    
           context.strokeStyle = '#CB9A61';      
           context.lineWidth=10;    
           context.strokeRect(10,  10, theCanvas.width-20, theCanvas.height-20);    
           context.fillStyle = "#FFFFFF";    
           for(x=5;x<=canvas.width;xx=x+10){    
               context.beginPath();    
               context.arc(x,5,5,0,Math.PI*2,true);    
               context.arc(x,canvas.height-5,5,0,Math.PI*2,true);    
               context.closePath();    
               context.fill();    
           }    
           for(y=5;y<=canvas.height;yy=y+10){    
               context.beginPath();    
               context.arc(5,y,5,0,Math.PI*2,true);    
               context.arc(canvas.width-5,y,5,0,Math.PI*2,true);    
               context.closePath();    
               context.fill();    
           }    
       }    
       script>     
   head>     
<body>
   <p style="position: absolute; top: 100px; left: 100px;">
   <canvas id="canvas" width="400" height="170" top=50px; left=50px;>
   p>     
</body>     
</html>

如何写如下这样一个形状,一个矩形分成两部分,用斜线隔开,两种颜色。如图:

起初是这么一个思路,用一个p,中间画个斜线,分成两部分,两种颜色,但是没有实现,由于前台薄弱,能力有限,想到了另外一种方案。

用三个p,左右是两个p,设置宽和高,起重要作用的其实是这一部分:

其实就是一个矩形,分成两个三角形,最后实现了如上效果。换个思路,实现起来so easy,不能在一棵树上吊死。

代码如下:

<html lang="en">
    
<body style="margin: 0 0 0 0;">
   <p id="1" style="background-color:#727171;width:50px;height:20px;float:left" >p>     
   <p id="2" style="float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171;border-style:solid">p>     
   <p id="3" style="background-color:#9fa0a0;width:50px;height:20px;float:left" >p>     
body>     
html>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/arj1233881212123123.html

网友评论文明上网理性发言 已有0人参与

发表评论: