HTML5中Canvas的用法示例

這篇文章將為大家詳細講解有關HTML5中Canvas的用法示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　moveTo（x,y） 定義線條開始坐標

　　lineTo（x,y） 定義線條結束坐標

　　使用 stroke（） 方法來繪制線條

　　使用 beginPath（） 方法來清除當前畫布中存在的路徑 并且 準備開始繪制新的路徑

　　調用 arc（） 方法，傳入相應的參數

　　使用 stroke（） 方法來繪制線條

　　<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">

　　您的瀏覽器不支持HTML5 Canvas標簽

　　</canvas>

　　<script type="text/javascript">

　　var c=document.getElementById（"myCanvas"）;

　　var cxt=c.getContext（"2d"）;

　　cxt.fillStyle="#FF0000";

　　cxt.beginPath（）;

　　cxt.arc（80,28,25,0,Math.PI*2,true）;

　　cxt.closePath（）;

　　cxt.fill（）;

　　</script>

　　執行一下

　　createLinearGradient（x,y,x1,y1） - 創建線條漸變

　　createRadialGradient（x,y,r,x1,y1,r1） - 創建一個徑向/圓漸變

　　創建漸變對象（線性還是徑向）

　　使用兩種或兩種以上的停止顏色來實現顏色漸變效果：addColorStop（）方法指定顏色停止，參數使用坐標來描述，可以是0至1

　　應用漸變到畫布元素中，設置畫布上下文對象的 fillStyle或strokeStyle的值為 漸變，然后繪制形狀，如矩形，文本，或一條線

　　<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">

　　您的瀏覽器不支持HTML5 Canvas標簽

　　</canvas>

　　<script type="text/javascript">

　　var c=document.getElementById（"myCanvas"）;

　　var ctx=c.getContext（"2d"）;

　　// 創建漸變

　　var grd=ctx.createLinearGradient（0,0,200,0）; //線性

　　//var grd=ctx.createRadialGradient（75,50,5,90,60,100）; //徑向

　　grd.addColorStop（0,"blue"）;

　　grd.addColorStop（1,"white"）;

　　// 填充漸變

　　ctx.fillStyle=grd;

　　ctx.fillRect（10,10,150,80）;

　　</script>

　　執行一下

　　獲取或者創建 圖像的dom對象

　　使用 drawImage 方法實現圖像的繪制

　　<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">

　　您的瀏覽器不支持HTML5 Canvas標簽

　　</canvas>

　　<img id="img" src="/static/resource/img/logo.png" style="display: none;" />

　　<script type="text/javascript">

　　var c=document.getElementById（"myCanvas"）;

　　var ctx=c.getContext（"2d"）;

　　//創建圖像的dom對象，第一種方法

　　var img=new Image（）;

　　img.src="/static/resource/img/logo.png";

　　//創建圖片的dom對象，第二種方法

　　//var img=document.getElementById（"img"）;

　　ctx.drawImage（img,0,0）;

　　</script>

　　執行一下

　　使用 font  屬性來定義字體

　　使用 fillText（text,x,y） 在 canvas 上繪制實心的文本

　　使用 strokeText（text,x,y） 在 canvas 上繪制空心的文本

　　<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">

　　您的瀏覽器不支持HTML5 Canvas標簽

　　</canvas>

　　<script type="text/javascript">

　　var c=document.getElementById（"myCanvas"）;

　　var ctx=c.getContext（"2d"）;

　　ctx.font="30px 微軟雅黑";

　　ctx.fillText（"Hello World",10,50）; //繪制實心文字

　　//ctx.strokeText（"Hello World",10,50）; //繪制空心文字

　　</script>

關于“HTML5中Canvas的用法示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。