跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

HTML5 canvas学习的实例介绍

1. html5中的canvas标签的创建
window.onload = function(){ createCanvas(); } function createCanvas(){ var canvas_width= 200, canvas_height = 200; document.body.innerHTML = ""; }
2. HTML5Canvas标签绘制图形
var canvas_width= 500, canvas_height = 500;var mycanvas, context; window.onload = function(){ createCanvas(); drawRect(); } function createCanvas(){ document.body.innerHTML = ""; 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标签绘制图片 基于PhoneGap的HTML5的移动应用 中文WORD版 本文档主要讲述的是基于PhoneGap的HTML5的移动应用;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看 下载
var canvas_width= 500, canvas_height = 500;var mycanvas, context; window.onload = function(){ createCanvas(); drawImage(); } function createCanvas(){ document.body.innerHTML = ""; 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"; }

相关文章