站長資訊網1.HTML5中的Canvas標簽的創建
window.onload = function(){ createCanvas(); } function createCanvas(){ var canvas_width= 200, canvas_height = 200; document.body.innerHTML = "<canvas id="canvas" width=""+canvas_width+"" height=""+canvas_height+""></canvas>"; }
2.HTML5Canvas標簽繪制圖形
var canvas_width= 500, canvas_height = 500;var mycanvas, context; window.onload = function(){ createCanvas(); drawRect(); } function createCanvas(){ document.body.innerHTML = "<canvas id="mycanvas" width=""+canvas_width+"" height=""+canvas_height+""></canvas>"; mycanvas = document.getElementById("mycanvas"); context = mycanvas.getContext("2d"); } function drawRect(){ context.fillStyle ="#FF0000"; //context.rotate(45);//旋轉45度 //context.translate(200,200);//移動 //context.scale(2,0.5);//縮放 context.fillRect(0,0,200,200); }
3.HTML5Canvas標簽繪制圖片
var canvas_width= 500, canvas_height = 500;var mycanvas, context; window.onload = function(){ createCanvas(); drawImage(); } function createCanvas(){ document.body.innerHTML = "<canvas id="mycanvas" width=""+canvas_width+"" height=""+canvas_height+""></canvas>"; mycanvas = document.getElementById("mycanvas"); context = mycanvas.getContext("2d"); } function drawImage(){ var img = new Image(); img.onload = function(){ context.drawImage(img,0,0); } img.src = "1.png"; }
