目的最近实践课让随便做小项目，准备使用h5的canvas画布功能制作一个口红机闯关小游戏，学习实践过程问题记录和canvas功能学习整理。什么是canvascanvas中文为画布的意思，是html5中使用JavaScript在网页上绘制图形的元素。canvas元素本身是没有绘图能力的，所有的绘制工作必须在JavaScript中完成。canvas是在h5中的一个类似div的标签元素，在h5中创...
目的
最近实践课让随便做小项目，准备学习下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
最低0.47元/天 解锁文章
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
