如何在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中的对象分为哪几类

50个javascript面试和解答（收藏）

通过代码示例，了解css3+javascript按钮水波纹效果

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

javascript如何实现定时跳转页面

javascript在页面增加元素

javascript知识点总结之 jquery常用选择器和过滤选择器

javascript就是js吗

javascript用什么方法触发按钮的被点击事件

javascript预编译做了啥

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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