用Canvas画一个刮刮乐

Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像。canvas是HTML5中的新元素,使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。

在国外问答网站Quora上,许多开发者对于HTML5 Canvas元素的实用性进行了一系列探讨。Canvas非常灵活,能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形。

学习网址和资料:
菜鸟教程:http://www.runoob.com/html/html5-canvas.html
http://www.w3school.com.cn/tags/tag_canvas.asp

图片.png
###用Canvas画一个刮刮乐步骤:
#####一:创建一个画布(Canvas)
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas> 

#####二:使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

var isdown = false,
cover = document.getElementById("cover"),//首先,找到 <canvas> 元素:
covercanvas = cover.getContext("2d");//然后,创建 context 对象:

#####三:绘制矩形

//设置fillStyle属性可以是CSS颜色

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值