canvas
文章平均质量分 59
joke_shi
前端小菜一枚
展开
-
H5 canvas基础入门到捕鱼达人小游戏实现(1)
为什么学习canvas? 看见别人网页一些非常炫酷的效果,羡慕不已,于是对canvas产生了浓厚的兴趣,所以想仔细学习学习canvas.下面就一起来学习吧,本文为系列文章,最后会编写一个简单版的捕鱼达人小游戏作为结课标准。什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canva原创 2017-12-21 08:50:18 · 5976 阅读 · 0 评论 -
H5 canvas基础入门到捕鱼达人小游戏实现(5)drawImage的应用
不知不觉,这已经是第五篇canvas系列文章了, 课时我们依然没有讲捕鱼游戏,今天这节我们主要讲canvas是如何处理图片的,这节讲完了,我们就可以正式开始编写捕鱼游戏了。图片处理 drawImage1、context.drawImage(image,x,y)x:绘制图像的x坐标y:绘制图像的y坐标2、context.drawImage(image,x,y,w,h);x:画在canvas的x原创 2017-12-30 14:18:19 · 3125 阅读 · 2 评论 -
H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影
上一篇主要讲解了矩形柱状图,弧形和饼图的绘制,但是离我们的目标还是有点远,不要紧,我们基础api都还没有学习完,今天继续。本节主要内容 - canvas画板制作 - 块的直线运动 - 粒子运动 - 线性渐变 - 径向渐变 - 文字渲染 - 阴影canvas画板canvas画板简单来说就是设置一块画布在上面自由画线,看看效果图 document.addEventListener('D原创 2017-12-25 10:04:00 · 1248 阅读 · 0 评论 -
H5 canvas基础入门到捕鱼达人小游戏实现(2)-矩形,柱状图,饼图绘制
学习canvas是一个不长不短的过程,但是需要大量的实践,才能深入学习到canvas的精髓,所以看标题应该就知道canvas是一个系列文章,上一篇文章主要讲解了,canvas的如何画直线等一些基础的内容,那么这边文章,我们主要来学习下以下几点:基础: - 矩形 - 圆弧 - 柱状图 - 饼图画矩形var canvas= document.getElementById('canvas');原创 2017-12-21 13:33:22 · 950 阅读 · 0 评论 -
H5 canvas基础入门到捕鱼达人小游戏实现(4)canvas事件处理和图形动作
这已经是第四篇canvas文章了,今天主要讲canvas中图形动作和canvas中的事件图形动作常用动作api:平移,缩放,旋转平移var oC = document.getElementById('c1');var gd = oC.getContext('2d');gd.translate(100,100);//x,y平移到的位置gd.fillRect(0,0,100,100);//绘制一原创 2017-12-27 16:42:18 · 1716 阅读 · 0 评论