画布canvas的使用2
生活随笔
收集整理的這篇文章主要介紹了
画布canvas的使用2
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
畫布Canvas--2
- 示例3：創建畫布并畫圓
- 代碼
- 實現效果
- 結構分析
- 代碼塊分析
- 示例4：創建畫布并給它部分填色
- 代碼
- 實現效果
- 結構分析
- 代碼塊分析
- 示例5：創建畫布并設置背景圖像
- 代碼
- 實現效果
- 結構分析
- 代碼塊分析
- 總結
示例3：創建畫布并畫圓
代碼
<!DOCTYPE HTML> <html> <body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your Browser Does Not Support the Canvas Element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script> </body> </html>實現效果
1.創建一個矩形畫布
2.在畫布中畫一個圓
結構分析
涉及對象代碼塊分析
1.生成畫布對象：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your Browser Does Not Support the Canvas Element. </canvas>id,方便之后函數對對象進行操作或者讀取對應的信息
2.使用script畫一個圓
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill(); </script>生成畫布對象后，會自動執行script中的內容，前兩個語句是獲取操作的目標，后五句開始對目標進行操作：畫一個圓后，再對圓內進行顏色填充。
示例4：創建畫布并給它部分填色
代碼
<!DOCTYPE HTML> <html> <body><canvas Id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your Browser Does Not Support the Canvas Element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script> </body> </html>實現效果
結構分析
涉及對象代碼塊分析
1.創建canvas
<canvas Id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your Browser Does Not Support the Canvas Element. </canvas>只需要給出id，定義形狀。
2.使用script填充顏色
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50); </script>前兩個語句主要是獲取操作的對象，以及定義之后用script中的哪些函數對這個對象進行操作。
var grd=cxt.createLinearGradient(0,0,175,50); 和 cxt.fillRect(0,0,175,50); 共同決定了填充的結果，前部分決定漸變的范圍，后部分決定填充的范圍，如果范圍1小于范圍2，那么漸變色填充只會發生在范圍1中，其余部分變成單一顏色填充。
grd開頭的語句主要決定漸變色的顏色，cxt開頭的語句定義了填充顏色的操作。
示例5：創建畫布并設置背景圖像
代碼
<!DOCTYPE HTML> <html> <body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your Browser Does Not Support the Canvas Element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image() img.src="/i/eg_flower.png"cxt.drawImage(img,0,0);</script> </body> </html>實現效果
1.創建一個矩形畫布
2.更改背景
結構分析
涉及對象代碼塊分析
1.生成畫布對象：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your Browser Does Not Support the Canvas Element. </canvas>id,方便之后函數對對象進行操作或者讀取對應的信息
2.使用script插入一個背景圖片
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image() img.src="/i/eg_flower.png"cxt.drawImage(img,0,0); </script>生成畫布對象后，會自動執行script中的內容，前兩個語句是獲取操作的目標，后五句開始對目標進行操作：定義一個img變量，注意使用時涉及img變量的語句是否要加分號（判斷的標準是?）。最后再使用一個drawImage函數定義圖像的位置。
總結
至此，canvas告一段落。以后分析都采用代碼 、實現效果 、結構分析 、代碼塊分析的模式。
總結
以上是生活随笔為你收集整理的画布canvas的使用2的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安徽省计算机二级考试vfp试题,安徽省计
- 下一篇： arcmap点图层获取tif图像素值,A