1、canvas簡介

（1）canvas是HTML5標簽，表示畫布，canvas只是作為影像繪制的容器，所有的繪制作業都在腳本JavaScript內部完成，

（2）canvas的作用：①繪制基礎圖形；②繪制文字；③圖形變形和圖片合成；④處理圖片和視頻；⑤影片實作；⑥制作小游戲，

（3）支持canvas的瀏覽器：Firefox, safari, chrome, opera, IE9等，

2、canvas實戰

（1）查看當前瀏覽器是否支持canvas

可以在canvas標簽內書寫提示內容，若當前瀏覽器不支持canvas，則顯示提示內容，

<canvas id="myCanvas" height="900" width="900">您的瀏覽器過低，請更換高版本再試</canvas>

（2）修改畫布

canvas畫布是一個矩形區域，里面的每一個像素都可以被控制，應在canvas標簽內設定width和height屬性，不要在css里設定，避免以后canvas畫出的影像變形，

（3）獲取繪制環境

var myCanvas=document.getElementById('myCanvas');//獲取畫布id
    var ctx=myCanvas.getContext('2d');

getContext()方法回傳一個用于在畫布上繪圖的環境，此處語法：myCanvas.getContext('2d')，引數2d指定了你想要在畫布上繪制的型別，當前唯一的合法值為"2d"，它指定了二維繪圖，并且導致這個方法回傳一個環境物件，該物件匯出一個二維繪圖API，

3、方法：

方法	說明
beginPath()	開始定義路徑
closePath()	關閉前面定義的路徑
moveTo(float x, float y)	把canvas的當前路徑的結束點移動到x, y對應的點
lineTo(float x, float y)	把canvas的當前路徑從當前結束點連接到x, y對應的點
fill()	填充canvas當前路徑
stroke()	填充canvas當前路徑繪制邊框
fillStyle()	設定填充canvas路徑所使用的填充風格
strokeStyle()	設定繪制canvas路徑的填充風格
lineWidth()	設定筆觸線條的寬度

4、繪制圖形

（1）直線

//直線
ctx.beginPath();
ctx.moveTo(700,50);
ctx.lineTo(900,50);
ctx.closePath();
ctx.lineWidth=2;
ctx.strokeStyle='blue';//邊框顏色，若不設定則默認黑色
ctx.stroke();//描邊

（2）三角形

//三角形
    ctx.beginPath();
    ctx.moveTo(500,50);
    ctx.lineTo(600,150);
    ctx.lineTo(400,150);
    ctx.closePath();//繪制線條以回傳開始點
    ctx.lineWidth=10;
    ctx.strokeStyle='lightgreen';
    ctx.stroke();

（3）正方形

//手繪正方形
    ctx.beginPath();
    ctx.moveTo(200,50);
    ctx.lineTo(300,50);
    ctx.lineTo(300,150);
    ctx.lineTo(200,150);
    ctx.lineTo(200,50);
    ctx.fill()//填充

（4）圓和半圓

    //圓形
    ctx.beginPath();
    ctx.arc(250,250,50,0,2*Math.PI);//圓形，弧，引數：中心點x,中心點y,半徑r,起始弧度和結束弧度,false順時針,true逆時針
    ctx.fill()
    //半圓
    ctx.beginPath();
    ctx.arc(100,250,50,0,Math.PI);//圓形，弧，引數：中心點x,中心點y,半徑r,起始弧度和結束弧度,false順時針,true逆時針
    ctx.fill()

（5）文字（分別對其填充和描邊，二者混合）

   //文字
    ctx.beginPath();
    ctx.font='40px 微軟雅黑';
    ctx.fillText('Hello,Canvas!',50,350)
    ctx.beginPath();
    ctx.lineWidth=2;
    ctx.strokeText('Hello,Canvas!',350,350)

    //顏色與描邊混合文字
    ctx.beginPath();
    ctx.font='40px 微軟雅黑';
    ctx.fillText('Hello,Canvas!',650,350)
    ctx.beginPath();
    ctx.lineWidth=1;
    ctx.strokeText('Hello,Canvas!',650,350)

（6）添加陰影效果

    ctx.shadowColor='yellow';
    ctx.shadowOffsetX=10;
    ctx.shadowOffsetY=10;
    ctx.shadowBlur=2;//模糊級數

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/173559.html

標籤：HTML5

上一篇：天天996，試用期4個月，被公司勸退！開發者太糟心了！

下一篇：vue 中使用 iconfont

Canvas基礎