最近通过敲Ht ML 5+Css3，分享一些自己认为值得学习的知识，分享给大家。
如何 绘制 一个锯齿状的矩形：如图
我们 知道 绘制图形可以用canvas ，canvas是HTML5出现的新标签，用于在网页上绘制图形，H5的canvas使用Javascript在网页上绘制图形。
如上锯齿状的矩形，就是用canvas绘制的。
实现代码：
XM L/HTML Code 复制内容到剪贴板
<!docty PE &nbs p; html > < html lang = "en" > < head > < meta charset = "UTF-8" > < t IT le > 锯齿图 </ 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. stroke Style = ' # CB9A61' ; context.lineWidth = 10 ; context.strokeRect(10, 10, theCanvas.width-20, theCanvas.h ei ght-20); context.fillStyle = "#FFFFFF" ; for( x = 5 ;x < =canvas.width; x x =x+10){ context.be gin Path(); 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; y y =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 > < div style = "position: absolute; top: 100px; left: 100px;" > < canvas id = "canvas" width = "400" height = "170" top = 50px ; left = 50px ; > </ div > </ body > </ html >
如何写如下这样一个形状，一个矩形分成两部分，用斜线隔开，两种颜色。如图：
起初是这么一个思路，用一个div,中间画个斜线，分成两部分，两种颜色，但是没有实现，由于前台薄弱，能力有限，想到了另外一种 方案 。
用三个div,左右是两个div,设置 宽 和高，起 重要 作用的其实是这一部分：
其实就是一个矩形，分成两个三角形，最后实现了如上效果。换个思路，实现起来so easy，不能在一棵树上吊死。
代码如下：
XML/HTML Code 复制内容到剪贴板
<!DOCTYPE HTML > < html lang = "en" > < body style = " ;m arg in: 0 0 0 0;" > < div id = "1" style = "background-color:#727171;width:50px;height:20px;float:left" > </ div > < div id = "2" style = "float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171;border -s tyle:solid" > </ div > < div id = "3" style = "background-color:#9fa0a0;width:50px;height:20px;float:left" > </ div > </ body > </ html >
后续继续总结有关HTML和CSS的一些知识，前台的知识看上去 简单 ，其实是个细致活，可以锻炼一个人的耐心。从简单到复杂，从入门到深入， 一点 点 提高 自己。
总结
以上是 为你收集整理的 HTML5+CSS3绘制锯齿状的矩形 全部内容，希望文章能够帮你解决 HTML5+CSS3绘制锯齿状的矩形 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5+CSS3绘制锯齿状的矩形的详细内容...