一、引言

本文主要是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. POJ--2823--Sliding Window----单调队列问题

    Sliding Window Time Limit:12000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Des ...

  2. 【转】Unity5.x发布IOS项目Xcode8免签证调试发布教程

    http://www.jianshu.com/p/b0fb49fbcc14 最近尝试发布一下IOS项目,发现现在发布已经简单很多了,不需要开发者账户也能简单快捷进行真机调试. 调试: 1.准备工作①硬 ...

  3. Redis实现缓存，你应该懂的哪些思路！

    场景一:类似于微博,实现关注和被关注功能. 思路: 对每个用户使用两个集合类型键,用来存储关注别人的用户和被该用户关注的用户.当用户A关注用户B的时候,执行两步操作: sadd user:A B sa ...

  4. canvas图片跨域问题

    canvas的drawImage使用跨域图片时候,会报错,解决方法如下: 1. 使用base64替换跨域图片 如果图片不大,且只有几张,可以使用base64,来代替跨域引用图片. 2. 设置image ...

  5. [USACO Section 5.3]量取牛奶 Milk Measuring (动态规划,背包$dp$)

    题目链接 Solution 完全背包 \(dp\) , 同时再加一个数组 \(v[i][j]\) 记录当总和为\(j\) 时第 \(i\) 种物品是否被选. 为保证从小到大和字典序,先将瓶子按大小排序 ...

  6. photoshop 安装

    Photoshop 下载: http://www.duote.com/soft/54352.html 下载完后解压选择..\Adobe CS6\Set-up.exe ,点击  Set-up.exe   ...

  7. 关于getAttribute()和setAttribute()的总结

    继续声明:欲练其功,必先自宫.博主正处在自宫阶段,修炼得道者多多指教. 最近在看<JavaScript DOM 编程艺术>这本书,看到了getAttribute()和setAttribut ...

  8. 【11】 Express安装入门与模版引擎ejs

    前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use([p ...

  9. Jib构建你的第一个java镜像

    jib Official:GoogleContainerTools/jib 本文示例完整demo github地址 github.com/moxingwang/- 想要了解并且使用jib,首先你得知道 ...

  10. Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题

    Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题 原理讲解: 链接地址:http://www.cnblogs.com/chopper/archive/2012/03/ ...