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

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

轉載于:https://www.cnblogs.com/Dream-Seeker/p/4434411.html

總結

以上是生活随笔為你收集整理的html5中在canvas上绘图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。