Javascript入门阶段——了解JS

朝花夕拾明月夜

于 2020-10-18 19:02:41 发布

阅读量2.4k

点赞数 10

分类专栏： JS Level1(入门课程) 文章标签： javascript html

本文链接：https://blog.csdn.net/YWX_KB/article/details/109147866

版权

10 篇文章 4 订阅

订阅专栏

百度百科——Javascript

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

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

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

创建html文件并写出框架

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

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

<canvas id="canvas" 
		style="border:3px solid red;" 
		width="500" 
		height="500"></canvas>

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

ctx 即为JS中的画笔

ctx.drawImage(1,2,3);

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

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

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

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

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

注意：

关注

专栏目录