一、引言

本文主要是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进行绘图图像的更多相关文章

  1. 【重点突破】——Canvas技术绘制随机改变的验证码

    一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...

  2. 【重点突破】——Canvas技术绘制音乐播放器界面

    一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求  点 ...

  3. HTML5 Canvas 2D绘图

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...

  4. 【重点突破】——第三方绘图工具FusionCharts.js的使用详解

    一.引言 项目组中,经常会因为绘制图表的繁杂度,衡量会不会使用第三方绘图工具,如果自己做很困难,成本使用高于第三方绘图工具库,就会使用.很多人使用的是Chart.js,因为它是免费使用的,不过,缺点就 ...

  5. html --- canvas --- javascript --- 绘图方法

    Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像. 如有疑问请访问链接:http://javascript.ruanyifeng.com/htmlapi/canvas.html < ...

  6. Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  7. Canvas 基本绘图方法总结

    一.基本内容  1.简单来说,HTML5提供的新元素<canvas>  2.Canvas在HTML页面提供画布的功能,在画布中绘制各种图形  3.Canvas绘制的图形与HTML页面无关, ...

  8. canvas加载图像

    之前按照例子,加载图像,发现加载图像,加载不上去,代码也没有错误,经过几次的尝试:发现需要重复调用下drawImage才可以. <script type="text/javascrip ...

  9. 【重点突破】——two.js模拟绘制太阳月亮地球转动

    一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...

随机推荐

  1. 201621123034 《Java程序设计》第4周学习总结

    Week04-面向对象设计与继承 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 答:对象.重载.继承.多态 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需 ...

  2. 发行说明 - Kafka - 版本1.0.0

    发行说明 - Kafka - 版本1.0.0 以下是Kafka 1.0.0发行版中解决的JIRA问题的摘要.有关该版本的完整文档,入门指南以及有关该项目的信息,请参阅Kafka项目网站. 有关升级的注 ...

  3. 【HDU 1711 Number Sequence】

    Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission ...

  4. inux监控平台搭建-监控项

    linux监控平台搭建-监控项 本人运维某生态互联网监控平台服务.过程中遇见了很多问题.目前互联网有很多的开源监控工具:nagios.zabbix.falcon.cacti...各有优点.这里不讲解监 ...

  5. webpack最佳入门实践系列(1)

    1.webpack简介 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler).它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 1 ...

  6. C# 获取NTP远程同步时间

    收到一个需要定时同步远程服务器的需求,用C# 实现 网上搜索到解决方案,代码如下: 获取远程时间 参数配置:"NTPServer"  远程时间服务器地址 获取远程服务器时间代码: ...

  7. linux之参数实用讲解

    <1>linux文件参数 在Windows下是使用 %1 %2 %3 而在Linux下是使用   $1 $2  $3 ------------------- 如: 1.某bat文件 cd ...

  8. （一） Spring基础概述

    1.历史 第一阶段:xml配置 在Spring1.x时代,使用Spring开发满眼都是xml配置的Bean,随着项目的扩大,我们需要把xml配置文件分布放到不同配置文件中,需要频繁的在开发的类和配置文 ...

  9. 十步优化SQL Server中的数据访问

    原文发布时间为:2011-02-24 -- 来源于本人的百度文章 [由搬家工具导入] 转载：http://tech.it168.com/a2009/1125/814/000000814758_all. ...

  10. 读扇区错误:0柱面0磁头1扇区(硬盘问题，蓝屏等 0x0000007B)

    原文发布时间为:2010-05-25 -- 来源于本人的百度文章 [由搬家工具导入] 读扇区错误:0柱面0磁头1扇区(硬盘问题，蓝屏等 0x0000007B) DISKGEN能找到,那就没什么大问题的 ...