HTML5 繪製圖片(上)：關於canvas元素引領下一代web頁面的問題

HTML5 繪製圖片(上)：關於canvas元素引領下一代web頁面的問題_html5教學技巧

WBOY

發布： 2016-05-16 15:49:28

原創

1326 人瀏覽過

初識canvas元素

HTML5新增了一個元素canvas，用於繪圖使用，其實它的表現和div比較接近（其實他應該屬於inline-block），而提供了許多接口，從而輕易的繪製矩形框、園三角形等

PS：關於HTML5新增元素

经过最近两天的学习，和以前对HTML5的认知，我认为HTML5其实还是HTML4，两者之间没多大的区别，无非是增加了点新东西。<br />我认为HTML5为我们带来的真正意义是：我们可以用javascript做更多的事情了；我们可以用javascript实现更好的产品了。比如HTML5就解决了我们头疼的跨域问题、实时通信API、与现在的canvas之所以HTML5叫HTML5，我认为他是划时代的，比如他让我们用网页开发游戏变成可能；比如他让电脑桌面只剩IE不在是传说（过于夸张）

登入後複製

繪製長方形框

直入正題，我們來繪製一個矩形框看看,這裡提供一個顏色選擇器用於方便的選擇顏色，PS：現在不用jquery編程感覺真麻煩。。。

問題：定義樣式與定義height與width

一來就遇到了問題，我這裡先來截張圖：

複製程式碼

程式碼如下:

< /title> <br /> <script type="text/javascript"> <br /> function draw() { <br /> //取得canvas物件<br /> var canvas = document.getElementById('canvas'); <br /> if (canvas == null) { <br /> return false; <br /> } <br /> var context = canvas.getContext('2d'); <br /> context.fillStyle = '#99d9ea'; <br /> context. fillRect(0, 0, 300, 200); //填滿畫布結束<br /> <br /> context.strokeStyle = 'red'; <br /> context.fillStyle = 'gray'; <br /> context.lineWidth = 1; <br /> context.fillRect(10, 10, 100, 100); <br /> context.strokeRect(10, 10, 100, 100); <br /> <br /> context.clearRect(20, 20, 🎜> context.clearRect(2020, ) ; <br /> } <br /> </script> <br /><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <br /><body> <br /> <canvas id="canvas" width=300 height="200" style="border: 1px solid black; width: 300px; height: 200px;"> <br /> </canvas> <br /> <br /> <br /> <button onclick="draw();"> <br /> 繪製長方形</button> <button onclick="draw();"> <br /> 繪製長方形</button> < > <input type="color" /> <br /></body> <br /></html><br /></div><br /></p> <p>　　各位情況canvas元素，圖一位設定width與height的情況，圖二十用style指定的情況：</p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042416135928.jpg" /></p> <p>可以看到，對於canvas來說，還是老實定義高寬的好，別去傻乎乎的用樣式了，當然這個問題需要實際研究才能得出最終結論。 </p> <p>好了，現在我們再來看看畫長方形這個方法：</p> <div class="cnblogs_Highlighter"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;gutter:false;">PS：其实，使用该方法这么麻烦，完全可以将该函数封装下下，使用便会简单许多</pre><div class="contentsignin">登入後複製</div></div> </div> <div class="cnblogs_Highlighter"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;gutter:false;">1、使用getElementById方法获取绘制对象2、取得上下文getContext('2d')，这都是固定的写法3、指定填充的颜色fillStyle和绘制的颜色strokeStyle，即里面的颜色和边框的颜色4、指定线宽linewidth5、填充/绘制 fillRect/strokeRect 参数为 x,y,width,height6、若是要使其中一块透明，使用clearRect</pre><div class="contentsignin">登入後複製</div></div> </div> <p>至此，繪製矩形框便暫時告一段落。 </p> <p><strong><font size="4">繪製圓形 </font></strong></p> <p>現在我們來繪製圓形，這個說起繪製圓形，其實我原來用js好像寫過一個，這裡也貼出來看看：<br /><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode18'));"><u>複製程式碼</u></span></div>程式碼如下:</div><div class="msgborder" id="phpcode18"><br />我是純js畫的圓<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1 /DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title> ;

說話，他還是比較圓的說。。。

進入正題

說起畫圓、正弦圖等一定是要經過一定計算的，所以稍稍複雜點：

①建立路徑

②建立圖形路徑

③路徑建立完成後關閉路徑

我是一个圆

我们来看看绘制圆过程中其它地方都没有问题，但是创建圆路径这块值得考虑：

arc方法参数很多，依次是：xy半径开始弧度（我们一般喜欢角度，所以要转换）结束弧度顺时针或者逆时针true为顺时针<br />其它都好说，主要这个开始角度和结束角度我们来研究下，因为开始我没搞懂，但后来我发现他其实很简单了。。。就是开始的角度和结束的角度嘛，和我们高中学的知识一样的，只不过单位换算Math.PI/180为一度。。。。<br />反正还是没说清楚，对了，记得我们高中画圆的除了圆规和一个计量三角形角度的半圆直尺了吗，我要说的角度就是那个。。。太坑爹了！<br />好像最右边是0度，垂直是90度，水平是180度，既然如此，我们再来看看<br /><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode20'));"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode20"><br /> 正时针逆时针 <br /> <!DOCTYPE html><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title></title><br /> <script type="text/javascript"><br /> function draw() {<br /> //获取canvas对象<br /> var canvas = document.getElementById('canvas');<br /> if (canvas == null) {<br /> return false;<br /> }<br /> var context = canvas.getContext('2d');<br /> context.fillStyle = '#99d9ea';<br /> context.fillRect(0, 0, 400, 300); //填充画布结束<br /> <br /> context.beginPath();<br /> context.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);<br /> context.closePath();<br /> context.fillStyle = 'gray';<br /> context.fill();<br /> <br /> context.beginPath();<br /> context.arc(180, 180, 50, 0, 180 * Math.PI / 180, false);<br /> context.closePath();<br /> context.fillStyle = 'gray';<br /> context.fill();<br /> <br /> <br /> }<br /> </script><br /> </head><br /> <body><br /> <canvas id="canvas" width="400" height="300"><br /> </canvas><br /> <br /> <button onclick="draw();"><br /> 绘制圆</button><br /> <input type="color" /><br /> </body><br /> </html><br /> </div><br /><p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042416135933.jpg" /></p><p>我们发现正时针与逆时针还是有所不同的，</p><div class="cnblogs_code"><pre class="brush:php;toolbar:false"> context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);

原谅我这里居然思考了半个小时，我甚至搜索了高中的资料。。。。