在web頁面增加畫布
<canvas id="lookwhatIdrew" width="600" height="200"></canvas>
- canvas（畫布）元素是一個(gè)正常的HTML元素，首先是一個(gè)開始<canvas>標(biāo)記。
- 我們增加一個(gè)id來標(biāo)識這個(gè)畫布，稍后會看到如何使用這個(gè)id
- width屬性定義它在web頁面中水平方向占多少個(gè)像素。
- height定義它所占的頁面垂直區(qū)域。
畫布四周可以環(huán)繞HTML，畫布與其他元素沒有什么不同。
- 一個(gè)頁面可以有多個(gè)畫布，你可以為每個(gè)畫布指定一個(gè)唯一的id,這樣能夠?qū)⑺鼈冏鳛槲ㄒ坏漠嫴紒磉M(jìn)行繪制。
在畫布上繪制四方形
我們使用javascript在畫布上面繪制一個(gè)x=10 y=10 長寬都是100px的圖片
<script>
window.onload = function() {
var canvas = document.getElementById("lookwhatIdrew");
var context = canvas.getContext("2d");
context.fillRect(10,10,100,100);
};
</script>
- 首先需要通過畫布的id獲取畫布的引用。
- 我們需要通過畫布的一個(gè)“2d”上下文來具體繪制
- 矩形的填充默認(rèn)是黑色。通過fillRect來進(jìn)行填充?？梢酝ㄟ^fillStyle屬性改變默認(rèn)填充色。context.fillStyle = "lightblue"
如果使用代碼來檢測瀏覽器是否支持畫布，需要使用canvas對象中是否存在getContext方法，如下；
var convas = document.getElementById("lookwhatIdrew");
if(canvas.getContext) {
//you have canvas
}else {
//sorry no canvas API support
}
注意：我們并沒有調(diào)用getContext這個(gè)方法，只是查看它是否有值，所以不使用canvas.getContext().
如果沒有提供畫布元素支持，你可以向用戶發(fā)送一個(gè)有好的消息，告訴他們應(yīng)該升級。瀏覽器看到一個(gè)它不認(rèn)識的元素，默認(rèn)行為就是顯示其中包含的文本。所以，不支持畫布的瀏覽器看到<canvas>元素時(shí)，它就顯示其中的文本，如下：
<canvas id="lookwhatIdrew" width="600" height="200">
Hey you, you, upgrade your browser !!
</canvas>
在畫布上繪制三角形
- 使用beginPath方法告訴畫布我們要開始一個(gè)新路徑
context.beginPath();
- 使用moveTo方法把“鉛筆”移動到畫布上的一個(gè)指定點(diǎn)，可以認(rèn)為把鉛筆放在這一點(diǎn)上。
context.moveTo(100, 150);
- lineTo方法描述路徑，從鉛筆的當(dāng)前位置描到畫布上的另一個(gè)點(diǎn)。
context.lineTo(250, 70);
- 我們已經(jīng)完成三角形的第一條邊，現(xiàn)在再來畫第二條線。
context.lineTo(125, 30);
- 使用closePath方法閉合路徑。
context.closePath();
- 設(shè)置線寬
context.lineWidth = 5;
- 用線描述路徑
context.stroke();
8 .設(shè)置顏色用來紅色填充三角形
context.fillStyle = "red";
9 .填充三角形
context.fill();
在畫布上繪制圓形
- 使用beginPath方法告訴畫布我們要開始一個(gè)新路徑
context.beginPath();
- 使用arc方法來繪制圓形
context.arc(150, 150, 50, 0, 2 *Math.PI, true);
3 .設(shè)置顏色用來紅色填充圓形
context.fillStyle = "red";
4 .填充圓形
context.fill();
下面深入分析arc方法，查看它的各個(gè)參數(shù)：
context.arc(x, y, radius, startAngle, endAngle, direction);
- x和y參數(shù)確定圓心在畫布上的位置。
- radius這個(gè)參數(shù)指定圓的半徑(寬度的1/2)
- startAngle,endAngle表示弧的起始角和終止角來確定圓上的起點(diǎn)和終點(diǎn)。
- diretion是布爾值，如果為true，就表示逆時(shí)針畫弧。如果為false，則表示順時(shí)針畫弧。而角度是從右邊中間位置開始算0度，所以這個(gè)需要注意。
使用度轉(zhuǎn)化為弧度封裝的方法
function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
}
在畫布中添加文本
context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "bold 1em sans-serif";
context.textAlign = "left";
context.fillText = ("Hello world", 20, 40); //20 40是開始點(diǎn)
在畫布中添加圖片
- 首先需要一張圖片，要把這個(gè)圖像放在畫布上，需要一個(gè)javaScript image對象?？梢酝ㄟ^下面方法得到：
var twitterBird = new Image();
twitterBird.src = "twitterBird.png";
- 使用一個(gè)上下文方法在畫布上繪制這個(gè)圖像，通過方法drawImage方法
context.drawImage(twitterBird, 20, 120, 70, 70);
//20 ,20 是指定的x y 的位置
// 70 ,70是寬和高
- 關(guān)于圖像還有一點(diǎn)需要知道，圖像并不總會立即加載，所以在繪制圖像之前需要確保圖像已經(jīng)完全加載。要實(shí)現(xiàn)一個(gè)onload處理程序：
twitterBird.onload = function() {
context.drawImage(twitterBird, 20, 120, 70, 70);
}
把畫布轉(zhuǎn)化為圖片
function makeImage() {
var canvas = document.getElementById("tshirtCanvas");
canvas.onclick = function() {
window.location = canvase.toDataURL("image/png");
};
}
知行辦公，專業(yè)移動辦公平臺https://zx.naton.cn/
【總監(jiān)】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【運(yùn)營】運(yùn)維艄公，897221533@qq.com；****
【產(chǎn)品設(shè)計(jì)】流浪貓，364994559@qq.com；
【體驗(yàn)設(shè)計(jì)】兜兜，2435632247@qq.com；
【iOS】淘碼小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的頓悟，1217022114@qq.com；
【java】首席工程師MR_W，feixue300@qq.com；
【測試】土鏡問道，847071279@qq.com；
【數(shù)據(jù)】fox009521，42151960@qq.com；
