您當(dāng)前位置：首頁 > web前端 > htmlcss > HTML5-Canvas

HTML5-Canvas

來源：程序員人生發(fā)布時(shí)間：2014-05-26 18:03:11 閱讀次數(shù)：3226次

<canvas>是html5當(dāng)中的一個(gè)標(biāo)簽，通過Javascript來畫圖。

var canvas = document.getElementById(”canvas”);

var ctx = canvas.getContext(”2d”);

ctx.fillStyle = “rgb(0,0,200)”;

ctx.fillRect(10, 10, 50, 50);

</script>

畫圖形

這是canvas的網(wǎng)格，剛才的圖形，x=10,y=10, width=150, height=150

不像svg, canvas僅支持一種圖形-矩形，所有其它復(fù)雜的圖形都是通過一些函數(shù)來組成的。

畫矩形

fillRect(x,y,width,height) : 畫一個(gè)填充的矩形
strokeRect(x,y,width,height) : 為一個(gè)矩形描邊
clearRect(x,y,width,height) : 清楚一個(gè)矩形的一部分并且設(shè)為透明

rect(x, y, width, height)
直接畫矩形，當(dāng)調(diào)用rect方法時(shí)moveTo會(huì)直接定位到(0,0)位置

畫路徑

beginPath() 創(chuàng)建路徑的第一步是調(diào)用beginPath方法，返回一個(gè)存儲(chǔ)路徑的信息
closePath() 從當(dāng)前的點(diǎn)到起始點(diǎn)閉合路徑
stroke()描邊路徑
fill()填充路徑
lineTo(x, y) 從上一個(gè)起點(diǎn)到(x,y)的點(diǎn)畫線，上一個(gè)起點(diǎn)可以通過moveTo來指定，默認(rèn)為原先路徑的終點(diǎn)

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();

畫弧線

arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x,y)是圓弧的圓心，radius-半徑, startAngle和endAngle是圓弧的開始和結(jié)束弧度（radians = (Math.PI/180)*degree)，anticlockwise為true的話是逆時(shí)針，否則為順時(shí)針

二次方曲線以及貝塞爾曲線

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(cp1x, cp1y),(cp2x,cp2y)是曲線的控制點(diǎn)（紅點(diǎn)），(x,y)是曲線的終點(diǎn)

使用圖像

drawImage(image, x, y)image-圖像對(duì)象

function draw() {
var ctx = document.getElementById(’canvas’).getContext(’2d’);
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = ‘images/backdrop.png’;
}

drawImage(image, x, y, width, height)width和height是目標(biāo)canvas上圖像的寬高drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

image參數(shù)與前面一樣，后面的四個(gè)參數(shù)是截取的參數(shù)，再后面的四個(gè)參數(shù)是目標(biāo)canvas圖像的位置以及寬高