這篇文章主要介紹了一波HTML5 Canvas基礎繪圖實例代碼集合,包括圓形矩形圓角等基本圖形的繪制,需要的朋友可以參考下
基本繪制
XML/HTML Code
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var context = canvas.getContext('2d');
// 線寬
context.lineWidth = 4;
// 畫筆顏色
context.strokeStyle = 'red';
// 填充色
context.fillStyle = "red";
// 線帽類型
context.lineCap = 'butt'; // round, square
// 開始路徑
context.beginPath();
// 起點
context.moveTo(10,10);
// 終點
context.lineTo(150,50);
// 繪制
context.stroke();
｝
矩形
XML/HTML Code
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
context.beginPath();
context.strokeRect(10,10,70,40);
// 矩形的另一種方式
context.rect(10,10.70,40);
context.stroke();
// 實心矩形
context.beginPath();
context.fillRect(10,10,70,40);
// 另一種方式實心矩形
context.beginPath();
context.rect(10,10,70,40);
context.fill();
｝
圓形
XML/HTML Code
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
context.beginPath();
// 圓中心坐標x, 圓中心坐標Y, 圓弧半徑， 起始角度，終止角度，是否逆時針
// 第4個參數(shù)和第五個參數(shù)是要傳入的弧度，如果畫30角度，需要將其轉化為弧度 30 * Math.PI / 180
context.arc(100,100,70,0,130 * Math.PI / 180, true);
context.stroke();
context.fill();
｝
圓角
XML/HTML Code
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
context.beginPath();
context.moveTo(20,20);
context.lineTo(70,20);
// 為一條路徑畫弧度p1.x p1.y p2.x, p2.y 弧半徑，
context.arcTo(120,30,120,70, 50);
context.lineTo(120,120);
context.stroke();
// 擦除canvas 畫板
context.beginPath();
context.fillRect(10,10,200,100);
// 擦除區(qū)域
context.clearRect(30,30,50,50);
｝
二次貝塞爾曲線
XML/HTML Code
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(20,50,200,20);
context.stroke();
｝
三次貝塞爾曲線
XML/HTML Code
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
context.moveTo(68,130);
var cX1 = 20;
var cY1 = 10;
var cX2 = 268;
var cY2 = 10;
var endX = 268;
var endY = 170;
context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
context.stroke();
// 利用clip指定繪圖區(qū)域，指定繪圖區(qū)域之后，只能在繪圖區(qū)域中進行繪圖擦歐總
// 繪制圓形
context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);
// 限制區(qū)域
context.clip();
// 開始嘗試繪制其他
context.beginPath();
context.fillStyle = 'lightblue';
// 結果矩形并沒有顯示出來
context.fillRect(0,0,300,150);
}
畫板進階使用
XML/HTML Code
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var context = canvas.getContext('2d');
/*
* drawImage(image,dx,dy)
* drawImage(image,dx,dy,dw,dh)
* drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
* image 繪圖對象
* dx dy canvas 的坐標
* dw，dh 表示 image 在canvas中即將繪圖的位置
* sw，sh 表示image 所要繪圖的區(qū)域
* sx,sy 所要繪圖的開始位置
*/
var image = document.getElementById('img');
context.drawImage(image, 0, 0);
var img = new Image();
img.src = 'images/1.jpg';
img.onload = function(){
// drawImage
// 從 0,0 坐標開始繪制
// context.drawImage(img,0,0);
// 從0，0 開始,繪制整張圖到100,100 長寬
// context.drawImage(img, 0, 0, 100, 100);
// 截圖,50,50 到 100,100 從 260,130 開始繪制，放到 100,100 長寬區(qū)域中
// context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
// 利用getImageData 和 putImageData 繪制圖片
context.drawImage(img, 10, 10);
// 從畫板上獲取像素數(shù)據
// 開始位置， 結束位置
var imgData = context.getImageData(50,50,100,100);
// 將數(shù)據畫到畫板指定位置坐標
context.putImageData(imgData,10,260);
// 將所去的像素數(shù)據一部分，畫到畫板上
context.putImageData(imgData,200,260,50,50,100,100);
// createImageData 創(chuàng)建像素
var imgData = context.getImageData(50,50,200,200);
// 創(chuàng)建指定大小的空對象
var imgData01 = context.createImageData(imgData);
for (i = 0; i < imgData01.width * imgData01.height * 4; i+=4) {
// 紅色像素
imgData01.data[i + 0] = 255;
imgData01.data[i+1] = 0;
imgData01.data[i+2] = 0;
imgData01.data[i+3] = 255;
}
context.putImageData(imgData01, 10, 260);
}
}