Javascript入门阶段——了解JS

1.1 JavaScript的定义

  • 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言
  • 它是未来5到10年主流的编程语言,并且对于编程的结果能有很好的展现。
  • 对于初学者,尤其是中小学生来说是首选的编程语言。
  • JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格

百度百科——Javascript

1.2 使用的软件

市面上有许多软件 比如WebStorm 或 Intellij IDEA
小编喜欢用aptana studio3 点这里下载软件
当然使用其他的软件不影响运行

1.3 创建Html文件

我们的代码需要在html文件里编译

  • 首先打开我们的aptana软件 创建文件夹

选择project
填写文件名
注意:文件夹和文件名称必须写英文或_等符号

创建html文件并写出框架

<!DOCTYPE html>
<html>
	<title>test01</title>
</html>

框架
好了!写程序前的准备工作做好了,接下来让我们学习新的知识吧!

2.1 JS中的画布

<canvas id="canvas" 
		style="border:3px solid red;" 
		width="500" 
		height="500"></canvas>
  • 上述的代码即为Js中的画布
  • 上述代码会在浏览器生成一个红框,红框所在区域即为画布所在区域
    代码示例2.1

2.2 JS中的画笔

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx 即为JS中的画笔

2.3 drawImage方法——画图片

ctx.drawImage(1,2,3);
  • drawImage方法用于实现在画布上画图片。
  • drawImage方法的后边有一对小括号,在小括号里由两个逗号分隔成了3个部分。在1处放置你想要画的图片;在2处放置图片位置的X坐标;在3处放置图片位置的Y坐标。

2.4 在坐标为(300,200)的位置画一架敌飞机

例子

在坐标为(300,200)的位置画一架敌飞机,代码如下:

//代码中的图片可替换
var enemy = new Image();
enemy.src = "images/enemy1.png";
enemy.onload = function(){
	ctx.drawImage(enemy,300,200)
}

2.5 在坐标为(0,0)的位置画出飞机大战的背景

例子
在坐标为(0,0)的位置画出飞机大战的背景,代码如下

var enemy = new Image();
enemy.src = "images/enemy1.png";
enemy.onload = function(){
	ctx.drawImage(bg,0,0);
	ctx.drawImage(enemy,300,200);
}

注意:

  • 代码结尾处需要加英文状态下的分号 例" ; "
  • 代码是由上向下执行的;
  • 如果先画敌飞机再画背景,背景就会把敌飞机覆盖掉,所以如果想让背景和敌飞机同时出现就应该先画背景再画敌飞机。
  • 10
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值