HTML5 canvas学习小例代码
2021-07-08 12:07
标签：translate blog 绘制图形 drawrect span image element create doc 1.HTML5中的Canvas标签的创建 2.HTML5Canvas标签绘制图形 3.HTML5Canvas标签绘制图片 HTML5 canvas学习小例代码 标签：translate blog 绘制图形 drawrect span image element create doc 原文地址：http://www.cnblogs.com/moqiutao/p/7097163.htmlwindow.onload = function(){
createCanvas();
}
function createCanvas(){
var canvas_width= 200, canvas_height = 200;
document.body.innerHTML = "";
}
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);
}
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";
}