HTML5的Canvas是一種用于繪制圖形和動畫的HTML元素,在Web應用程序中廣泛使用。使用Canvas可以繪制基本的形狀、圖像、文本和路徑,還可以創建動畫和交互式應用程序。下面是一些Canvas代碼示例:
// 創建畫布元素
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
// 獲取Canvas上下文
var ctx = canvas.getContext('2d');
// 繪制形狀
ctx.fillStyle = 'red'; // 填充顏色
ctx.fillRect(100, 100, 200, 200); // 繪制矩形
ctx.fillStyle = 'blue'; // 填充顏色
ctx.beginPath(); // 開始路徑
ctx.arc(250, 250, 100, 0, 2 * Math.PI); // 繪制圓形
ctx.fill(); // 填充路徑
// 繪制圖像
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 200, 200); // 繪制圖像
};
img.src = 'image.jpg';
// 創建動畫
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空畫布
ctx.fillStyle = 'green'; // 填充顏色
ctx.fillRect(50, 50, 100, 100); // 繪制矩形
ctx.fillStyle = 'yellow'; // 填充顏色
ctx.fillRect(350, 350, 100, 100); // 繪制矩形
}
setInterval(draw, 30); // 每30毫秒繪制一次
上面的代碼演示了Canvas的基本用法,包括創建畫布元素、獲取Canvas上下文、繪制形狀、繪制圖像以及創建動畫。Canvas還支持很多其他功能,如漸變、陰影效果、變換等,可以用于創建各種炫酷的效果。
下一篇html5百度導航代碼