0. html页面准备
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>h5 test</title>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/chapter1.js" ></script>
</head>
<body>
<img src="img/caomei.png" height="400" id="pic" style="display: none;"/>
<canvas id="mycanvas" width="600" height="600"></canvas>
</body>
</html>
1. canvas
实现在canvas上简单的绘制形状和图片
var Chapter1 = {
/**
* 通过js在canvas上画矩形以及文字
* @param {Object} canvas
*/
drawRect: function(canvas) {
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(255,0,0,0.5)';
context.fillRect(100, 100, 200, 200);
context.fillStyle = 'black';
context.fillText('正方形',100,100);
},
/**
* 通过js在canvas上画出图片以及，对图片的旋转的操作
* @param {Object} canvas
*/
drawImage: function(canvas) {
var context = canvas.getContext('2d');
var image = $('#pic')[0];
// context.drawImage(image,500,500,300,300,0,0,600,600);
context.drawImage(image,100,100,50,50);
context.translate(100,100); // 坐标系平移
context.rotate(Math.PI/2); // 坐标系旋转90度
context.drawImage(image,0,0,50,50);
}
};
$(document).ready(function() {
Chapter1.drawImage($('#mycanvas')[0]);
});
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
