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";
}登录后复制
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！