HTML5一步一步走——Canvas画布(4)

HTML5一步一步走——Canvas画布(四)
绘制第一个图形：
<canvas width="1200" height="800" >
当前浏览器不支持Canvas
</canvas>

需要借助javascript来完成：
代码如下：代码采用了jquery的预加载方法$(function(){})
 绘制矩形对象有三个方法： <blockquote style="margin:0 0 0 40px; border:none; padding:0px">--context.fillRect(x,y,w,h);//填充矩形区域 --context.strokeRect(x,y,w,h);//填充矩形的边界区域 --context.clearRect(x,y,w,h);//clearRect相当于相橡皮擦，把矩形的内容把擦掉</blockquote> Colors颜色的定义方式有：方法 值Hexadecimal(十六进制)#ff0000 hexadecimal(简写的十六进制)#f00 rgb(标准颜色)rgb(255,0,0) rgb(parcent)(以百分比的形式，指定标准颜色)rgb(100%,0%,0%) rgba(标准颜色+alpha通道，即加透明效果)rgba(255,0,0,1.0) rgba(以百分比指定标准颜色+alpha通道)rgba(100%,0%,0%,1.0) hsl(色调(H)、饱和度(S)、亮度(L))hsl(0,100%,50%) hsla(在hsl的基础上+alpha透明通道)hsla(0,100%,50%,1.0) svg(named color)(以通用定义的标准名称来定义颜色)red 阴影效果： shadow,在context的基础上使用。 例如： context.shadowOffsetX = 2.0;//在X轴之上凸出多少 context.shadowOffsetY = 2.0;//在Y轴之上凸也多少 context.shadowColor = "rgba(50%,50%,50%,0.75)";//阴影颜色 context.shadowBlur = 2.0;//模糊的程度 填充效果Gradients： 有两种划分：线性渐变，中心区域渐变 线性渐变色例子： <blockquote style="margin:0 0 0 40px; border:none; padding:0px">1.设置起始位置与截止位置 </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">var linGrad = context.createLinearGradient(0,450,1000,450);</blockquote></blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">2.渐变中节点(例如，先渐变为红，到黄，到橙，到紫色)： </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">linGrad.addColorStop(0.0,'red');</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">linGrad.addColorStop(0.5,'yellow');</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">linGrad.addColorStop(0.7,'orange');</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">linGrad.addColorStop(1.0,'purple');</blockquote></blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">3.应用到图形上： </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.fillStyle = linGrad;</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.fillRect(0,450,1000,450);</blockquote></blockquote> 中心区域渐变色例子（以某点为圆心，进行中心扩散式的渐变。）： <blockquote style="margin:0 0 0 40px; border:none; padding:0px">1.定义渐变区域： </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">var radGrad = context.createRadialGradient(260,320,40,200,400,200);</blockquote></blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">2.定义节点: </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">radGrad.addColorStop(0.0,'yellow');</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">radGrad.addColorStop(0.9,'orange');</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">radGrad.addColorStop(1.0,'rgba(0,0,0,0)');</blockquote></blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">3.定义填充对象 </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.fillStyle = radGrad;</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.fillRect(0,200,400,400);</blockquote></blockquote> createRadialGradient解析:语法：createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) 参数意义： <blockquote style="margin:0 0 0 40px; border:none; padding:0px">xStart, yStart：开始圆的圆心的坐标（即原点）。 radiusStart：开始圆的直径。 xEnd, yEnd：结束圆的圆心的坐标。 radiusEnd：结束圆的直径。</blockquote> 路径绘制(Paths)： <blockquote style="margin:0 0 0 40px; border:none; padding:0px">1.开始绘制： </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.beginPath();</blockquote></blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">2.定义所有节点 </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.moveTo(300,700);</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.lineTo(600,100);</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.lineTo(900,700);</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.moveTo(350,400);</blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.lineTo(850,400);</blockquote></blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px">3.用stroke实现绘制： </blockquote><blockquote style="margin:0 0 0 40px; border:none; padding:0px"><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.stroke();</blockquote></blockquote> 绘制线：context.lineTo(x,y); 抛物线：context.quadraticCurveTo(cpx,cpy,x,y); <blockquote style="margin:0 0 0 40px; border:none; padding:0px">cpX, cpY:控制点的坐标。 x, y :曲线终点的坐标。 </blockquote> 贝塞尔曲线:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); <blockquote style="margin:0 0 0 40px; border:none; padding:0px">cpX1, cpY1: 和曲线的开始点（当前位置）相关联的控制点的坐标。 cpX2, cpY2: 和曲线的结束点相关联的控制点的坐标。 x, y: 曲线的结束点的坐标。 </blockquote> 自定义曲线：arcs:context.arcTo(x1,y1,x2,y2,radius); <blockquote style="margin:0 0 0 40px; border:none; padding:0px">x1, y1: 点 P1 的坐标。 x2, y2: 点 P2 的坐标。 radius: 定义圆弧的圆的半径。 弧的第二种绘制方式： 以弧度坐标定义弧：context.arc(x,y,radius,startAngle,endAngle,anticlockwise) arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针) 矩形对象绘制：context.rect(x,y,w,h);</blockquote> 边界填充由strokeStyle决定： <blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.lineWidth=[pixel]//lineWidth以像素为单位定义宽度 context.lineCap=[*butt,round,square]//定义边界样式 context.lineJoin=[bevel,round,*miter]//定义连接</blockquote> </div><div style="margin:0 auto;width:300px;height:250px;position:relative;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6147101717324856" data-ad-slot="1958144088" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="subn-nav"><a href="//m.reader8.net">读书人网</a> ><a href="//m.reader8.net/jiaocheng/css/">CSS</a></div><div class="sp-jctu"><h3> 热点推荐 </h3><ul><li><a href="//m.reader8.net/jiaocheng/20140607/2366389.html">怎样实现在地址栏输入因特网址就弹出</a></li> <li><a href="//m.reader8.net/jiaocheng/20140605/2358829.html">html中的特殊字符变换</a></li> <li><a href="//m.reader8.net/jiaocheng/20140605/2358828.html">PHP中htmlentities跟htmlspecialchars</a></li> <li><a href="//m.reader8.net/jiaocheng/20140604/2355057.html">娴HTML5ㄧЩㄥㄥ腑</a></li> <li><a href="//m.reader8.net/jiaocheng/20140604/2355056.html">html做成的chm无法打开</a></li> <li><a href="//m.reader8.net/jiaocheng/20140603/2350252.html">CSS截取图片上一部分做背景,该怎么解决</a></li> <li><a href="//m.reader8.net/jiaocheng/20140603/2350251.html">jsp如何将list传给后台</a></li> <li><a href="//m.reader8.net/jiaocheng/20140602/2346539.html">怎样实现在地址栏输入因特网址就弹出</a></li> <li><a href="//m.reader8.net/jiaocheng/20140602/2346538.html">html做成的chm无法打开</a></li> <li><a href="//m.reader8.net/jiaocheng/20140601/2345174.html">惯用特殊符号HTML代码</a></li> </ul></div><div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></div> <div class="footer">触屏版 | <a href="//www.reader8.net/jiaocheng/20120811/1301296.html#fromapp">电脑版</a>读书人网 m.reader8.net</div> <script language="javascript"> function clickme(sad){ var divobjdiv = document.getElementById("divobjdiv" + sad); if(divobjdiv.style.display =="none"){ divobjdiv.style.display ="block"; }else{ divobjdiv.style.display ="none"; } var wenzi = document.getElementById('divobjimg' + sad); if(wenzi.innerText == "收起"){ wenzi.innerText = "查看更多"; }else{ wenzi.innerText = "收起"; } } </script> <div id="back-top"><a href="#top"></a></div> </body> </html>

HTML5一步一步走Canvas画布(4)