您當前位置：首頁 > web前端 > htmlcss > HTML5-Canvas

HTML5-Canvas

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

<canvas>是html5當中的一個標簽，通過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僅支持一種圖形-矩形，所有其它復雜的圖形都是通過一些函數(shù)來組成的。

畫矩形

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

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

畫路徑

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

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的話是逆時針，否則為順時針

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

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

使用圖像

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

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是目標canvas上圖像的寬高drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

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