目的
最近实践课让随便做小项目,准备学习下h5的canvas画布功能,参考canvas实现的见缝插针游戏,来制作一个口红机闯关小游戏,学习实践过程问题记录和canvas功能学习整理。
什么是canvas
canvas中文为画布的意思,是html5中使用JavaScript在网页上绘制图形的元素。canvas元素本身是没有绘图能力的,所有的绘制工作必须在JavaScript中完成。canvas是在h5中的一个类似div的标签元素,在h5中创建一个canvas画布元素,作为一个绘制图形的载体容器,绘制图形只显示在该区域,绘制图形太大则只显示部分。然后具体绘制的图形在JavaScript中具体绘制。
浏览器支持
创建canvas元素
向html5页面添加画布canvas元素,设置id或者class、宽度、高度,设置id或者class是为了方便在JavaScript中通过id或者class来获取到canvas画布元素。在canvas标签中间的文字是在浏览器不支持时显示的提示。这样canvas画布就创建好了,和div一样,不设置背景颜色是透明的,可设置其背景颜色显示出来。
<body>
<div>
<canvas id = "myCanvas" width = "500" height = "800">浏览器不支持</canvas>
&l