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 class="aged2"><script type="text/javascript">a("article_content_down");</script></div> </div> <div id="pagebox" > <a href="/jiaocheng/css/" target="_blank">查看更多</a> <A href="/jiaocheng/20121021/1301289.html" title="css中的zoom的功用">下一篇</A></div> <div id="MainLeftll"> <div id="MainLeftllToolbar">本文网址：<a href="https://www.reader8.net/jiaocheng/20120811/1301296.html">https://www.reader8.net/jiaocheng/20120811/1301296.html</a></div> <div class="related"><span class="relatedIco1">读书人精选</span> <ul class="relatedList"> </ul> </div> <div class="aged3"><script type="text/javascript">a("article_content_down2");</script></div> <div class="aged3a"><script type="text/javascript">a("article_content_down3");</script></div> </div> </div> <!-- 文章正文左边结束 --> <!-- 文章正文右边开始 --> <div class="leftbox_r"> <div class="aged4"><script type="text/javascript">a("article_right_up");</script></div> <div class="Rtitle"> <span class="Rtitle_text">热点排行</span></div> <div class="RContl"> <div style="font-size:12px;text-align:left; border:1px solid #9cc9e0; padding:1px 4px;color:#000000;font-family:Arial, Helvetica,sans-serif;"><span>Bad Request. </span></div>
