【重点突破】——使用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,极大的简化了应用的开发.这里,我使用 ...
随机推荐
- Atom-无懈可击的Markdown编辑器
备战美赛期间,向岳神学习,搞了Atom玩协作开发,第一次没有自动补全的手撸了遗传算法.今天发现Atom还有写Markdown的妙用,遂拿来练手. 1. 安装Atom 下载安装Atom:https:// ...
- python矩阵和向量的转置问题
numpy有很多方法进行转置,这里由于时间和精力限制(主要是我实在比较懒,有一个基本上一直能使的,就懒得看其他的了),其他方法我没研究,这里我总结的东西,如果有问题,欢迎各路大佬拍砖 一.创建矩阵: ...
- 使用make构建c程序
1.Targets, Prerequisites, Commands Targets: 大意是生成的可执行文件. Prerequisites: 生成可执行文件的目标文件或C 语言源文件. Target ...
- nodejs、yarn编译安装
yarn和npm一样,是nodejs的一个依赖管理工具 1.安装nodejs 如果缺少c++ compiler 会报错 yum install -y gcc gcc-c++ 安装nodejs V8 ...
- BZOJ4516 [Sdoi2016]生成魔咒 【后缀自动机】
题目 魔咒串由许多魔咒字符组成,魔咒字符可以用数字表示.例如可以将魔咒字符 1.2 拼凑起来形成一个魔咒串 [1,2]. 一个魔咒串 S 的非空字串被称为魔咒串 S 的生成魔咒. 例如 S=[1,2, ...
- webpack命令
webpack // 执行一次开发的编译 webpack -p // 针对发布环境编译(压缩代码) webpack -w(或--watch) // 进行开发过程持续的增量编译(飞快地!) webpac ...
- webRTC前世今生
WebRTC 的前世今生 本文由 rwebrtc 翻译 WebRTC 技术是激烈的开放的 Web 战争中一大突破.-Brendan Eich, inventor of JavaScript 无插件实时 ...
- HDU 3792 素数打表
Description If we define dn as: dn = pn+1-pn, where pi is the i-th prime. It is easy to see that d1 ...
- 【06】Vue 之 组件化开发
组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
- BZOJ 3640: JC的小苹果
3640: JC的小苹果 Time Limit: 15 Sec Memory Limit: 256 MBSubmit: 425 Solved: 155[Submit][Status][Discus ...