如何在javascript中绘制方块

PHP中文网 JavaScript

本文摘自PHP中文网，作者藏色散人，侵删。

在javascript中绘制方块的方法：首先创建一个HTML示例文件；然后在body中添加canvas标签；接着在head中添加script标签，用于输入javascript代码；最后通过draw方法绘制方块即可。

本文操作环境：windows7系统、javascript1.8.5&&html5版、Dell G3电脑。

html中插入javascript画矩形

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>canvas元素示例</title>

<script>

function draw(id)

{

var canvas = document.getElementById(id);

if(canvas == null)

return false;

var context = canvas.getContext('2d');

context.fillStyle = "#eeefff";

context.fillRect(0,0,400,300);

context.fillStyle = "green";

context.strokeStyle = "red";

context.lineWidth = 1;

context.fillRect(50,50,100,100);

context.strokeRect(50,50,100,100);

}

</script>

</head>

<body οnlοad="draw('canvas');">

<h1>canvas中画矩形</h1>

<canvas id="canvas" width="400" height="300"/>

</body>

</html>

212b49891904563556222d95b591135.png

【推荐学习：javascript高级教程】

以上就是如何在javascript中绘制方块的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

javascript开平方怎么求

javascript中bind是什么意思

javascript显示中文是乱码怎么办

js的趣味实现：给你一个戴眼镜的笑脸

javascript中的json方法有哪些

js中isnan和number.isnan的区别是什么

详解javascript降低函数复杂度的方法

javascript的不等于是啥符号

storage event如何实现页面间通信

html5结合javascript实现简易音乐播放器

更多相关阅读请进入《javascript》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...