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

HTML5一步一步走——Canvas画布(四)
绘制第一个图形：
<canvas width="1200" height="800" >
当前浏览器不支持Canvas<!--当浏览器不支持canvas时显示的文本提示信息-->
</canvas>


需要借助javascript来完成：
代码如下：代码采用了jquery的预加载方法$(function(){})
</p><p><br></p>绘制矩形对象有三个方法：<br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">--context.fillRect(x,y,w,h);//填充矩形区域<br>--context.strokeRect(x,y,w,h);//填充矩形的边界区域<br>--context.clearRect(x,y,w,h);//clearRect相当于相橡皮擦，把矩形的内容把擦掉</blockquote><br><br><p>Colors颜色的定义方式有：</p><p>方法 值</p><strong>Hexadecimal</strong>(十六进制)<u>#ff0000</u><br><strong>hexadecimal</strong>(简写的十六进制)<u>#f00</u><br><strong>rgb</strong>(标准颜色)<u>rgb(255,0,0)</u><br><strong>rgb</strong>(parcent)(以百分比的形式，指定标准颜色)<u>rgb(100%,0%,0%)</u><br><strong>rgba</strong>(标准颜色+alpha通道，即加透明效果)<u>rgba(255,0,0,1.0)</u><br><strong>rgba</strong>(以百分比指定标准颜色+alpha通道)<u>rgba(100%,0%,0%,1.0)</u><br><strong>hsl</strong>(色调(H)、饱和度(S)、亮度(L))<u>hsl(0,100%,50%)</u><br><strong>hsla</strong>(在hsl的基础上+alpha透明通道)<u>hsla(0,100%,50%,1.0)</u><br><strong>svg</strong>(named color)(以通用定义的标准名称来定义颜色)<u>red<br></u><br>阴影效果：<br><strong>shadow</strong>,在context的基础上使用。<br>例如：<br>      context.shadowOffsetX = 2.0;//在X轴之上凸出多少<br>            context.shadowOffsetY = 2.0;//在Y轴之上凸也多少<br>            context.shadowColor = "rgba(50%,50%,50%,0.75)";//阴影颜色<br>            context.shadowBlur = 2.0;//模糊的程度<br><br><br>填充效果<strong>Gradients：</strong><br>有两种划分：线性渐变，中心区域渐变<br><strong>线性渐变色例子：</strong><br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">1.设置起始位置与截止位置<br></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.渐变中节点(例如，先渐变为红，到黄，到橙，到紫色)：<br></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.应用到图形上：<br></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><br><strong>中心区域渐变色例子</strong>（以某点为圆心，进行中心扩散式的渐变。）：<br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">1.定义渐变区域：<br></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.定义节点:<br></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.定义填充对象<br></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"><p>context.fillRect(0,200,400,400);</p></blockquote></blockquote><p><br></p><p><strong>createRadialGradient解析:</strong></p>语法：createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)<br>参数意义：<br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">xStart, yStart：开始圆的圆心的坐标（即原点）。<br>radiusStart： 开始圆的直径。<br>xEnd, yEnd： 结束圆的圆心的坐标。<br>radiusEnd： 结束圆的直径。</blockquote><br><br><strong>路径绘制(Paths)：</strong><br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">1.开始绘制：<br></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.定义所有节点<br></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实现绘制：<br></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><br><strong>绘制线：</strong>context.lineTo(x,y);<br><br><strong>抛物线：</strong>context.quadraticCurveTo(cpx,cpy,x,y);<br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">cpX, cpY:控制点的坐标。<br>x, y :曲线终点的坐标。 </blockquote><br><br><strong>贝塞尔曲线:</strong>context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);<br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">cpX1, cpY1: 和曲线的开始点（当前位置）相关联的控制点的坐标。 <br>cpX2, cpY2: 和曲线的结束点相关联的控制点的坐标。 <br>x, y:    曲线的结束点的坐标。 </blockquote><br><strong>自定义曲线：</strong>arcs:context.arcTo(x1,y1,x2,y2,radius);<br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">x1, y1: 点 P1 的坐标。 <br>x2, y2: 点 P2 的坐标。 <br>radius: 定义圆弧的圆的半径。 <br>弧的第二种绘制方式：<br>以弧度坐标定义弧：context.arc(x,y,radius,startAngle,endAngle,anticlockwise)<br>arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)<br>矩形对象绘制：context.rect(x,y,w,h);</blockquote><br><strong>边界填充由strokeStyle决定：</strong><br><blockquote style="margin:0 0 0 40px; border:none; padding:0px">context.lineWidth=[pixel]//lineWidth以像素为单位定义宽度<br>context.lineCap=[*butt,round,square]//定义边界样式<br>context.lineJoin=[bevel,round,*miter]//定义连接</blockquote><br> </p></div> <div class="article-footer"> <div class="article-pager"> </div> <div class="article-ranking"> <div class="ranking-title">阅读人气排行</div> <div class="ranking-list"><ul class="hot-list-ul"> <li><span class="rank-num top-rank">1</span><a href="/jiaocheng/20140608/2370003.html" target="_blank" title="SQL SEVER 2008安装后出现的2个范例的区别，高分求解">SQL SEVER 2008安装后出现的2个范例的区</a></li> <li><span class="rank-num top-rank">2</span><a href="/jiaocheng/20140222/2254670.html" target="_blank" title="硬盘查到计算机上为什么看不到盘符">硬盘查到计算机上为什么看不到盘符</a></li> <li><span class="rank-num">3</span><a href="/jiaocheng/20140222/2254661.html" target="_blank" title="下面这个关于IP地址转换的有关问题，用什么方法解决呢">下面这个关于IP地址转换的有关问题，用什么</a></li> <li><span class="rank-num">4</span><a href="/jiaocheng/20121008/2061488.html" target="_blank" title="struts2+ibators oralce设立ID自增长">struts2+ibators oralce设立ID自增长</a></li> <li><span class="rank-num">5</span><a href="/jiaocheng/20120811/2027025.html" target="_blank" title="Linux 2.6.31内核优化-一">Linux 2.6.31内核优化-一</a></li> <li><span class="rank-num">6</span><a href="/jiaocheng/20120702/2023821.html" target="_blank" title="linux 装配时分区选择（转载）">linux 装配时分区选择（转载）</a></li> <li><span class="rank-num">7</span><a href="/jiaocheng/20140117/1990510.html" target="_blank" title="WinPcap网络抓包有关问题取不到PPP网卡">WinPcap网络抓包有关问题取不到PPP网卡</a></li> <li><span class="rank-num">8</span><a href="/jiaocheng/20120324/1772320.html" target="_blank" title="妈妈的生日快到了,送什么礼物好呢解决方案">妈妈的生日快到了,送什么礼物好呢解决方</a></li> <li><span class="rank-num">9</span><a href="/jiaocheng/20120611/1621921.html" target="_blank" title="20000多条记录的表做成cache合适吗？该怎么解决">20000多条记录的表做成cache合适吗？该怎么</a></li> <li><span class="rank-num">10</span><a href="/jiaocheng/20141110/2641576.html" target="_blank" title="MS Dynamic AX 的理解">MS Dynamic AX 的理解</a></li> </ul></div> </div> </div> </div> </div> <aside class="right-sidebar"> </aside> </div> </div> </main> <footer class="site-footer"><div class="container"><div class="footer-links"><a href="/data/page/1.html">关于我们</a> - <a href="/data/page/2.html">联系方式</a> - <a href="/sitemap.html">网站地图</a> - <a href="/data/page/3.html">版权声明</a> - <a href="/data/friendsite/">友情链接</a> - <a href="#top">返回顶部</a></div><p>读书人 (Reader8.net) . <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2025459685号-1</a></p></div></footer><div style="display:none"><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script></div></body></html>