一、引言

本文主要是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. dib build ipa image Injection password

    针对dib制作的deploy image,注入密码有两种方式: devuser/dynamic-login .对应 dib 添加密码,是通过 dynamic-login element 来完成的. 首 ...

  2. Python_字符串操作

      name='hu\tqihang'                       #\t是TAB键  1.打印相关 print(name.center(50,'-')) #一共打印50个字符,不够的 ...

  3. 关于eclipse连接mysql jar包

    步骤如下: 右键工程--选择build path -- add  Libraries. 弹出框选user library,点击next. 弹出框点击add libraries . 继续点击new ,输 ...

  4. 考研心得--一个差劲的ACMer

    考研心得   --ACMer(山东工商学院) 2019年2月20日星期三(正月十六),打开QQ音乐,播放<告别都市>,应同学要求,也是给自己奋斗一年多时间的“考研大业”一个交代,写下这篇考 ...

  5. iOS设备唯一标识（可以用版）

    由于UDID和OpenUDID被禁用,系统自带的的识别唯一标识有两种 广告标示符(IDFA-identifierForIdentifier) 这是iOS 6中另外一个新的方法,advertisingI ...

  6. proteus仿真 引脚显示电平变化但不能显示波形

    proteus仿真 引脚显示电平变化但不能显示波形 原来是没有选择通道问题,proteus默认优先使用A通道才会显示波形,如果优先使用B,C,D通道,需要选择...

  7. CentOS7.3系统启动故障修复

    CentOS7.3系统启动故障修复 破解CentOS7的root口令方法一 启动时任意键暂停启动菜单,选择启动内核菜单项 按 e 键进入编辑模式 将光标移动 linux16 开始的行,添加内核参数rd ...

  8. AGC 26 F Manju Game

    $\DeclareMathOperator{\sw}{sw}$ $\DeclareMathOperator{\sb}{sb}$ $\DeclareMathOperator{\dp}{dp}$ 用 $\ ...

  9. POJ1671 Rhyme Schemes

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1776   Accepted: 984   Special Judge De ...

  10. 【CF1015D】Walking Between Houses（构造，贪心）

    题意:从1开始走,最多走到n,走k步,总长度为n,不能停留在原地,不能走出1-n,问是否有一组方案,若有则输出 n<=1e9,k<=2e5,s<=1e18 思路:无解的情况分为两种: ...