【重点突破】——使用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,极大的简化了应用的开发.这里,我使用 ...
随机推荐
- 微信小程序--问题汇总及详解之tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接 传参的格式为url=&q ...
- 【转】unity自带寻路Navmesh入门教程（一）
http://liweizhaolili.blog.163.com/blog/static/16230744201271161310135/ 说明:从今天开始,我阿赵打算写一些简单的教程,方便自己日后 ...
- Git详解之二 Git基础 转
http://www.open-open.com/lib/view/open1328069733264.html Git 基础 读完本章你就能上手使用 Git 了.本章将介绍几个最基本的,也是最常用的 ...
- order by 对null的处理
[Oracle 结论] order by colum asc 时,null默认被放在最后order by colum desc 时,null默认被放在最前nulls first 时,强制null放在最 ...
- ICPC World Finals 2018 Problem H Single Cut of Failure
题目链接 题解视频 题解文档 解法概要: 问题可以转化为 考虑一个长为 $2n$ 的数组 $A$,$1$ 到 $n$ 这 $n$ 个整数每个恰在 $A$ 中出现 $2$ 次.判断是否存在一个长为 $n ...
- 如何修改registry的默认的存储位置
https://github.com/goharbor/harbor/issues/5375 the adminserver only can show the usage of /data, thi ...
- 使用filter: blur() 的时候解决图片周围泛白和容器外范围变模糊的问题
类似于这种,这个时候出现了周围变模糊,并且边缘泛白的情况 周围模糊这个问题很好解决,给父容器加overflow:hidden:就可以了 效果如上,至于周围泛白的问题就需要动点脑筋了,给目标添加 tra ...
- 微信小程序 body属性的问题
微信小程序里面没有了body这个节点了,取而代之的是page
- GridView 动态绑定控件 OnRowCommand事件触发
主题:GridView动态生成的控件不能触发OnRowCommand事件,且点击控件按钮后,控件的值会消失. 案例, 由于公司需要绑定的数据列顺序是动态生成的,且有的数据列需要绑定Button控件.所 ...
- Codevs 1085 数字游戏
1085 数字游戏 2003年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 丁丁最近沉迷于一个数字游戏之中 ...