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

HTML5 学习笔记12-Canvas标签的使用

2017-01-13 11:04 851 查看

1、创建Canvas：Canvas元素用于图形的绘制，但<canvas>只是一个容器，内容通过脚本来完成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
#mycanvas{
width: 200px;
height: 200px;
background-color: #232323;
}
</style>
</head>
<body>
<canvas id="mycanvas" class="canvas"></canvas>
</body>
</html>

<script>
var CANVAS_WIDTH=200,CANVAS_HEIGHT=200;
window.onload=function(){
createCanvas();
}
function createCanvas(){
document.body.innerHTML="<canvas id=\'mycanvas\' width=\'"+CANVAS_WIDTH+"\' height=\'"+CANVAS_HEIGHT+"\'></canvas>";
}
</script>

2、绘制图形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<script>
var CANVAS_WIDTH=640,CANVAS_HEIGHT=640;
var mycanvas,context;
window.onload=function(){
createCanvas();
}
function createCanvas(){
document.body.innerHTML="<canvas id=\'mycanvas\' width=\'"+CANVAS_WIDTH+"\' height=\'"+CANVAS_HEIGHT+"\'></canvas>"
mycanvas=document.getElementById("mycanvas");
context=mycanvas.getContext("2d");
drawRect();
}

function drawRect(){
context.fillStyle="#ff0000";
//context.rotate(45); //旋转
//context.translate(100,100); //位移
context.scale(2,0.5); //缩放
context.fillRect(0,0,200,200);
}
</script>
</body>
</html>

3、绘制图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<script>
var CANVAS_WIDTH=640,CANVAS_HEIGHT=640;
var mycanvas,context;
window.onload=function(){
createCanvas();
}
function createCanvas(){
document.body.innerHTML="<canvas id=\'mycanvas\' width=\'"+CANVAS_WIDTH+"\' height=\'"+CANVAS_HEIGHT+"\'></canvas>"
mycanvas=document.getElementById("mycanvas");
context=mycanvas.getContext("2d");
drawImg();
}

function drawImg(){
var img=new Image();
img.onload=function(){
context.drawImage(img,0,0);
}
img.src="drag.png";
}
</script>
</body>
</html>

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

标签： html 新手 canvas

相关文章推荐

新的分享

章节导航