【重点突破】——使用Canvas进行绘图图像
一、引言
本文主要是canvas绘图中绘制图像的部分，做了几个练习，综合起来，复习canvas绘图以及定时器的使用。
二、canvas绘制小飞机在指定位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>小飞机静止位于上下左右中</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d'); var p2 = new Image();
p2.src = 'image/p2.png';
console.log(p2.width);
p2.onload = function(){
ctx.drawImage(p2,0,0);
ctx.drawImage(p2,500-p2.width,0);
ctx.drawImage(p2,0,400-p2.height);
ctx.drawImage(p2,500-p2.width,400-p2.height);
ctx.drawImage(p2,250-200,200-100,400,200);
}
</script>
</body>
</html>
实现效果：
三、canvas绘制小飞机左右自动移动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>左右移动的小飞机</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d'); var p3 = new Image();
p3.src = 'image/p3.png';
console.log(p3.width);
p3.onload = function(){
var x = 0;
var xDirection = 1;
var y = 0;
setInterval(function(){
//清除画布上已有的内容
ctx.clearRect(0,0,500,400); ctx.drawImage(p3,x,y);
x += 5*xDirection; if(x>=500-p3.width){
xDirection = -1;
}
if(x<0){
xDirection = 1;
}
},30);
}
</script>
</body>
</html>
四、canvas绘制随鼠标移动的小飞机
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>随鼠标移动的小飞机</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d'); var p3 = new Image();
p3.src = 'image/p3.png';
console.log(p3.width);
p3.onload = function(){
var x = 0;
var y = 0;
//监听鼠标在画布上方移动事件
c7.onmousemove= function(e){
x = e.offsetX;
y = e.offsetY;
}; //使用定时器，不停的清画布，重绘飞机
//小坑：飞机的定位点是左上角，要改变定位点距离，改变重绘的x.y
setInterval(function(){
ctx.clearRect(0,0,500,400);
ctx.drawImage(p3,x-p3.width/2,y-p3.height/2);
},20); }
</script>
</body>
</html>
五、canvas绘制以自己为中心旋转的小飞机
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>以指定点为轴中心旋转的小飞机</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d'); var p2 = new Image();
p2.src = 'image/p2.png';
console.log(p2.width);
p2.onload = function(){
var deg1 = 10;
var deg2 = 20; setInterval(function(){
//绘制飞机1——绕自己为中心旋转
//平移+旋转+绘制+逆向旋转+逆向平移
ctx.translate(100,50);
ctx.rotate(deg1*Math.PI/180);
ctx.drawImage(p2,-100,-50);
ctx.rotate(-deg1*Math.PI/180);
ctx.translate(-100,-50); deg1 += 10; //绘制飞机2——不旋转
ctx.drawImage(p2,500-200,0); //绘制飞机3——绕自己为中心选转，速度是飞机1的2倍
ctx.translate(100,350);
ctx.rotate(deg2*Math.PI/180);
ctx.drawImage(p2,-100,-50);
ctx.rotate(-deg2*Math.PI/180);
ctx.translate(-100,-350); deg2 += 20;
},50)
}
</script>
</body>
</html>
更简单的方法：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>以指定点为轴中心旋转的小飞机</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d'); var p2 = new Image();
p2.src = 'image/p2.png';
console.log(p2.width);
p2.onload = function(){
var deg1 = 10;
var deg2 = 20; setInterval(function(){
//绘制飞机1——绕自己为中心旋转
//存盘+平移+旋转+绘制+恢复存盘
ctx.save();
ctx.translate(100,50);
ctx.rotate(deg1*Math.PI/180);
ctx.drawImage(p2,-100,-50);
ctx.restore(); deg1 += 10; //绘制飞机2——不旋转
ctx.drawImage(p2,500-200,0); //绘制飞机3——绕自己为中心选转，速度是飞机1的2倍
ctx.save();
ctx.translate(100,350);
ctx.rotate(deg2*Math.PI/180);
ctx.drawImage(p2,-100,-50);
ctx.restore(); deg2 += 20;
},50)
}
</script>
</body>
</html>
注：转载请注明出处
【重点突破】——使用Canvas进行绘图图像的更多相关文章
- 【重点突破】——Canvas技术绘制随机改变的验证码
一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...
- 【重点突破】——Canvas技术绘制音乐播放器界面
一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求 点 ...
- HTML5 Canvas 2D绘图
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...
- 【重点突破】——第三方绘图工具FusionCharts.js的使用详解
一.引言 项目组中,经常会因为绘制图表的繁杂度,衡量会不会使用第三方绘图工具,如果自己做很困难,成本使用高于第三方绘图工具库,就会使用.很多人使用的是Chart.js,因为它是免费使用的,不过,缺点就 ...
- html --- canvas --- javascript --- 绘图方法
Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像. 如有疑问请访问链接:http://javascript.ruanyifeng.com/htmlapi/canvas.html < ...
- Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像
绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...
- Canvas 基本绘图方法总结
一.基本内容 1.简单来说,HTML5提供的新元素<canvas> 2.Canvas在HTML页面提供画布的功能,在画布中绘制各种图形 3.Canvas绘制的图形与HTML页面无关, ...
- canvas加载图像
之前按照例子,加载图像,发现加载图像,加载不上去,代码也没有错误,经过几次的尝试:发现需要重复调用下drawImage才可以. <script type="text/javascrip ...
- 【重点突破】——two.js模拟绘制太阳月亮地球转动
一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...
随机推荐
- Leetcode 554.砖墙
砖墙 你的面前有一堵方形的.由多行砖块组成的砖墙. 这些砖块高度相同但是宽度不同.你现在要画一条自顶向下的.穿过最少砖块的垂线. 砖墙由行的列表表示. 每一行都是一个代表从左至右每块砖的宽度的整数列表 ...
- Linux 必要软件的安装与配置
主要是记录一下,免得下次重装系统后又到处搜索.. 一.必要软件的安装 JDK 下载 tar.gz:http://www.oracle.com/technetwork/java/javase/downl ...
- 为什么对多线程编程这么怕？pthread,sem,mutex,process
转自http://blog.chinaunix.net/uid-20788636-id-1841334.html 1.线程创建和退出创建线程实际上就是确定调用该线程函数的入口点,这里通常使用的函数是p ...
- Unity 碰撞检测
武器与怪物的碰撞 目前来说有三种思路,其实前两种算变种了: 1.动画关键帧回调 + 范围检测.http://blog.csdn.net/u013700908/article/details/52888 ...
- 数组洗牌算法-shuffle
数组洗牌,最近直接的想法是从数组随机取出一个元素,放到另一个数组中,但是这样取出的元素会有重复,必须采取一定的方法保证: 1. 元素不能重复2. 元素被抽取的概率相等,即随机性 数组洗牌经典算法有两种 ...
- display:table布局总结
1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- BZOJ2916 [Poi1997]Monochromatic Triangles 数论
答案等于总三角形数-不合法数 一个不合法三角形一定存在两个顶点,在这个三角形中这个顶点的角的两边不同色 #include<cstring> #include<cmath> #i ...
- 关于在生命周期当中进行setState操作的问题
当需要监听组件的属性改变的时候有两个生命周期componentWillReceiveProps和componentWillUpdate 当使用componentWillUpdate的时候可以获取到将要 ...
- 神奇的矩阵（bzoj 2396）
Description 给出三个行数和列数均为N的矩阵A.B.C,判断A*B=C是否成立. Input 题目可能包含若干组数据. 对于每组数据,第一行一个数N,接下来给出三个N*N的矩阵,依次为 ...
- HDOJ 1085 Holding Bin-Laden Captive!
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...