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;
}
以上就是html5 canvas学习的实例介绍的详细内容。