HTML5 畫布canvas使用方法_html5教學技巧

canvas 元素使用 JavaScript 在網頁上繪製圖像，本身就是沒有繪圖能力。

canvas 是一個矩形區域，可以控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。

下面來做幾個範例：

1、填充畫布

JavaScript Code複製內容到剪貼簿

1. "myCanvas" width="200""100" style="border:1px solid red;">   >   
2. <script><span class="string">"text/javascript"</script>>   
3. var c=document.getElementById("myCanvas");  >
4. var cxt=c.getContext("2d");   
cxt.fillStyle=
5. "#ccc";   
cxt.fillRect(5,10,150,60); 
6. //x，y，x，y   
  
  

執行如下：

2、取得座標

JavaScript Code

複製內容到剪貼簿

1. <script><span>"text/javascript"<span class="string">>    <span> </script>
 
2. function cnvs_getCoordinates(e){   
   x=e.clientX;   
   y=e.clientY;   
   document.getElementById(
5. "xycoordinates").innerHTML="Coordinates: ; ","   y   ")"; }     function
6.  cnvs_clearCoordinates(){       document.getElementById("xycoordinates"
7. ).innerHTML="").innerHTML=""） >   

XML/HTML Code

複製內容到剪貼簿

1. div id=id style="float:left;width:199px;height:99px;border:1px solid>🎠35oonmousemove="cnvs_getCoordinates(event)" onmouseout>div>  
div
2.  id=id 🎜>>div>     
3. 執行如下：

3、繪製線條、圖形

 1）、繪製方格如下：

JavaScript Code

複製內容到剪貼簿

"myCanvas"

 width=
1. "200""100" style="border:1px solid #c3c3c3;">  >  您的瀏覽器不支援 canvas 標籤.         
2. <script>"text/javascript"</script>
3. >   
4.   
5. var c=document.getElementById("myCanvas"
6. );  >
7. var cxt=c.getContext("2d");    cxt.moveTo(10,10); 
8. //x,y 起點    cxt.lineTo(10,50); //x,y   
9. cxt.lineTo(50,50); //x,y   
10. cxt.lineTo(50,10); //x,y   
11. cxt.lineTo(10,10); //x,y   
12. cxt.stroke();      
13.   
14.  執行如下
2）、繪製圓形如下：
JavaScript Code

複製內容到剪貼簿

1. "myCanvas" width="200""100" style="border:1px solid #c3c3c3;">  > 你的瀏覽器不支援canvas    
  
  
<script><span>"text/javascript">   <li class="alt"> <span> <span class="string"><span>var c=document.getElementById(<li><span>"myCanvas"<span class="keyword">);  > <span><span class="string">var<span> cxt=c.getContext("2d"<li class="alt"><span>);    <span class="keyword"> <span>cxt.fillStyle=<span class="string">"#ccc"<span>;    <li><span>cxt.beginPath();    <span class="string"> <span>cxt.arc(20,20,10,0,Math.PI*2,true<li class="alt"><span>);    <li><span>cxt.closePath();    <span class="keyword"> <span>cxt.fill();    <li class="alt"><span></script>   
4.   
執行如下：

4、繪製漸層

JavaScript Code

複製內容到剪貼簿

"myCanvas"

 width=

1. "200""100" style="border:1px solid #c3c3c3;">  > 您的瀏覽器不支援 canvas 標籤.         
<script><span>"text/javascript">   <li class="alt"> <span> <li><span>var c=document.getElementById(<li class="alt"><span>"myCanvas"<span class="string">);  > <span>var<li><span> cxt=c.getContext(<span class="keyword">"2d"<span>);    <span class="string"> <span>var<li class="alt"><span> grd=cxt.createLinearGradient(0,0,175,50);    <span class="keyword"> <span>grd.addColorStop(0,<span class="string">"#000000"<span>); //黑<li><span> > <span class="keyword">grd.addColorStop(1,<span>"#FFFFFF"<li class="alt">); <span>//白<span class="string"><> > <span>cxt.fillStyle=grd;    <span class="comment"> <span>cxt.fillRect(5,10,175,50);//x,y,x,y <li><span>   <span class="string"> <span></script>      
執行如下：
3. 5、圖片
4. JavaScript Code
5. 複製內容到剪貼簿
   1. "myCanvas" width="300""200" style="border:1px solid #c3c3c3;">  > 您的瀏覽器不支援 canvas 標籤.   
     
     
   <script><span>"text/javascript">   <li class="alt"> <span> <span class="string"><span>var c=document.getElementById(<li><span>"myCanvas"<span class="keyword">);  > <span><span class="string">var<span> cxt=c.getContext("2d"<li class="alt"><span>);    <span class="keyword"> <span><span class="string">var<span> img=new<li><span> Image()    <span class="keyword">img.src=<span>"aa.png"<span class="keyword">  <span> <li class="alt">cxt.drawImage(img,10,20); <span>//x,y <span class="string">  <span> <li></script>      
   4.  執行如下：
   以上就是本文的全部內容，希望對大家的學習有所幫助。

原文：

http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html