您的位置：首页 > Web前端 > JavaScript

JavaScript -- 简单的canvas标签

2016-05-09 10:45 585 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<!--创建格式 第一种方式:在这里创建,第二种方式:在JS文件里创建-->
<!--<style>-->
<!--.canvas{-->
<!--background-color: aqua;-->
<!--}-->
<!--</style>-->
<script src="app.js"></script>
</head>
<body>

<!--<canvas class="canvas" width="200px" height="200px"></canvas>-->

</body>
</html

var CANVAS_WIDTH = 500, CANVAS_HEIGHT = 500;

var mycanvas,context;

window.onload = function(){
creatCanvas();
drawRect();
//drawImage();
}
function creatCanvas(){
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); // 旋转的单位是度
// 位移:单位是像素
//context.translate(200,200);
// 缩放,单位是倍数
context.scale(2,0.5);
// 设置画布的坐标
context.fillRect(0,0,200,200);
}

function drawImage(){
var img = new Image;
img.onload = function(){
context.drawImage(img,0,0);
}
img.src = "2.png";
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航