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学习的实例介绍的详细内容。