HTML5中Canvas的使用方法有哪些

這篇文章主要介紹了HTML5中Canvas的使用方法有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　moveTo（x,y） 定義線條開(kāi)始坐標(biāo)

　　lineTo（x,y） 定義線條結(jié)束坐標(biāo)

　　使用 stroke（） 方法來(lái)繪制線條

　　使用 beginPath（） 方法來(lái)清除當(dāng)前畫布中存在的路徑 并且 準(zhǔn)備開(kāi)始繪制新的路徑

　　調(diào)用 arc（） 方法，傳入相應(yīng)的參數(shù)

　　使用 stroke（） 方法來(lái)繪制線條

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

　　您的瀏覽器不支持HTML5 Canvas標(biāo)簽

　　</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>

　　執(zhí)行一下

　　createLinearGradient（x,y,x1,y1） - 創(chuàng)建線條漸變

　　createRadialGradient（x,y,r,x1,y1,r1） - 創(chuàng)建一個(gè)徑向/圓漸變

　　創(chuàng)建漸變對(duì)象（線性還是徑向）

　　使用兩種或兩種以上的停止顏色來(lái)實(shí)現(xiàn)顏色漸變效果：addColorStop（）方法指定顏色停止，參數(shù)使用坐標(biāo)來(lái)描述，可以是0至1

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

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

　　您的瀏覽器不支持HTML5 Canvas標(biāo)簽

　　</canvas>

　　<script type="text/javascript">

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

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

　　// 創(chuàng)建漸變

　　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>

　　執(zhí)行一下

　　獲取或者創(chuàng)建 圖像的dom對(duì)象

　　使用 drawImage 方法實(shí)現(xiàn)圖像的繪制

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

　　您的瀏覽器不支持HTML5 Canvas標(biāo)簽

　　</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"）;

　　//創(chuàng)建圖像的dom對(duì)象，第一種方法

　　var img=new Image（）;

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

　　//創(chuàng)建圖片的dom對(duì)象，第二種方法

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

　　ctx.drawImage（img,0,0）;

　　</script>

　　執(zhí)行一下

　　使用 font  屬性來(lái)定義字體

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

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

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

　　您的瀏覽器不支持HTML5 Canvas標(biāo)簽

　　</canvas>

　　<script type="text/javascript">

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

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

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

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

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

　　</script>

　　執(zhí)行一下

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5中Canvas的使用方法有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!