首页 > 代码库 > HTML5 canvas学习小例代码
HTML5 canvas学习小例代码
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学习小例代码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。