JavaScript趣味编程--仿微信飞机大战游戏--1.画飞机

之前的文章已经介绍了如何使用canvas来画正方形,这次介绍如何使用canvas来画一张图片。
1.新建项目
本次使用的工具Aptana Studio 3,打开软件之后,选择File->New->Web Project,选择Default Project,再点击Next,输入你的项目名称,点击Finish,就完成了项目的创建。

2.创建图片文件夹image
在你新建好的项目下,右键点击选择New->Folder->输入文件夹名称image->点击Finish,完成文件夹创建

3.导入图片
把图片复制到image文件夹里面,
飞机图片命名为plane.png
这里写图片描述
背景图片命名为background.png
JavaScript趣味编程--仿微信飞机大战游戏--1.画飞机_第1张图片

4.新建网页文件index.html
在项目下,右键点击选择New->File->输入文件名称index.html->点击Finish,完成网页文件的创建

5.编辑网页文件


<html>
    <body>
        <canvas id="canvas" style="border:2px solid red;" width="480" height="650">
            不支持画板对象
        canvas>
        <script>
            //获取画布和画笔
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            //导入两张图片
            var plane = new Image();
            plane.src = "image/plane.png";
            var background = new Image();
            background.src = "image/background.png";
            //当图片加载完成,就执行这个方法
            enemy.onload = function() {
                //画背景
                ctx.drawImage(background,0,0);
                //画飞机图片
                ctx.drawImage(plane,300,200);
            }
        script>
    body>
html>

6.查看结果
JavaScript趣味编程--仿微信飞机大战游戏--1.画飞机_第2张图片

你可能感兴趣的:(javascript)