canvas是通過(guò)JavaScript控制的,而且其大小必須在繪制的時(shí)候就確定大小,不能再通過(guò)控制或改變canvas元素的大小

//html代碼 <canvas id="my_canvas" width="150" height="150">fallback content here </canvas>//js代碼 //通過(guò)JavaScript查看瀏覽器是否支持canvas元素 var canvas=document.getElement('my_canvas'); //先通過(guò)id屬性獲得canvas,看瀏覽器支持canvas的getContext方法 if(canvas.getContext){//2d的意思表示創(chuàng)建的是一個(gè)風(fēng)格,左上角是坐標(biāo)原點(diǎn)var context=canvas.getContext("2d");//設(shè)置圖形的顏色為紅色context.fillStyle="rgb(200,0,0)";//設(shè)置圖形的起點(diǎn)坐標(biāo)X\Y,長(zhǎng)和寬,下面畫(huà)的是一個(gè)起點(diǎn)是(10,10)長(zhǎng)和寬都是100的正方形context.fillRect(10,10,100,100);//向畫(huà)布中加入文字context.font='italic 40px sans-serif';context.textBaseline='top';context.fillText('AwesomeCo',60,0);//在canvas中繪制線條context.lineWidth=2;context.beginPath();//畫(huà)四個(gè)點(diǎn)context.moveTo(0,40);context.lineTo(30,0);context.lineTo(60,40);context.lineTo(285,40);//只有使用了stroke方法才能畫(huà)出線來(lái)context.stroke();context.closePath();//移動(dòng)畫(huà)板原點(diǎn)//在移動(dòng)原點(diǎn)前要先使用save()方法保留原點(diǎn)，以便恢復(fù)時(shí)使用，設(shè)置為還原點(diǎn)，還原點(diǎn)是以棧的結(jié)構(gòu)存儲(chǔ)//恢復(fù)時(shí)可以通過(guò)restore()恢復(fù)到棧最上面的還原點(diǎn)context.save();//移動(dòng)到新的原點(diǎn)，并畫(huà)一個(gè)正方形context.translate(20,20);context.fillRect(0,0,20,20);//繪制三角形//要先給畫(huà)筆上色context.fillStyle='#fff';//注意到給畫(huà)筆上色的兩種方法可以使用rgb(a,b,c)也可以使用‘#abc’樣式//strokeStyle可以用來(lái)設(shè)置圖形輪廓的顏色context.strokeStyle='#fff';context.lineWidth=2;context.beginPath();context.moveTo(0,20);context.lineTo(10,0);context.lineTo(20,20);context.lineTo(0,20);context.fill();context.closePath();context.restore(); }else{//如果瀏覽器不支持canvas則此處應(yīng)用來(lái)顯示替代canvas的文本內(nèi)容 } ? 知識(shí)點(diǎn)擴(kuò)充： 比較stroke與fill,strokeStyle與fillStyle的區(qū)別 stroke:線條，外形，輪廓 fill:封閉圖形的內(nèi)部 在使用stroke及fill時(shí)都要先使用 context.lineWidth=; context.beginPath() /**/ /**/ context.closePath(); ? stroke中的/**/內(nèi)容為 context.strokeSytle=; context.stroke(); 為所畫(huà)的內(nèi)容畫(huà)線條 ? fill中的/**/內(nèi)容為 context.fillStyle=; context.fill(); 當(dāng)所畫(huà)的圖形為封閉圖形時(shí)，畫(huà)筆會(huì)自動(dòng)上色并且全部顯示出來(lái) ? 這兩個(gè)方法也可能同時(shí)使用 ? 由于IE9之前的版本不能很好的兼容canvas元素，Google發(fā)布了一個(gè)名為ExplorerCanvas的庫(kù)，為IE用戶開(kāi)放了幾乎所有的Canvas APi 我們?cè)谑褂脮r(shí)只需要將js引入就可以 <!--[if lte IE 8]> <script type=”text/javascript” charset=”utf-8” src=”js/excanvas.js”> </script>
<!--[endif]-->

轉(zhuǎn)載于:https://www.cnblogs.com/Dream-Seeker/p/4434411.html

總結(jié)

以上是生活随笔為你收集整理的html5中在canvas上绘图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。