重点突破——使用Canvas进行绘图图像

Posted 宁静致远

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重点突破——使用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进行绘图图像的主要内容,如果未能解决你的问题,请参考以下文章

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

重点突破——SVG技术动态随机绘制圆形

HTML5 Canvas 性能:加载图像与绘图

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

重点突破——Canvas技术制作音乐播放器

Android绘图之Canvas变换(6)