从基础开始学习 canvas

这是我参与更文挑战的第9天，活动详情查看： 更文挑战 简介 为了更好的使用canvas，实现文字粒子效果。 主要是通过在缓存中创建一个canvas元素节点，把文本绘制在这个canvas节点上。然后使用

这是我参与更文挑战的第8天，活动详情查看： 更文挑战 简介 为了更好的使用canvas，动手实现一些小功能是很有必要的。这里主要使用clip()函数，实现水波只在裁剪后的圆中绘制，来实现圆球的水波进度

简介 经过前面的学习，我们基本掌握了常用的api和绘画技巧。现在通过实现一个小游戏，来深入了解画布在项目中如何使用。 游戏基本介绍 用户有一艘宇宙飞船，可以用箭头键左右移动，用空格键开火。屏幕顶部的敌

使用createImageData() 创建像素缓冲区 createImageData 创建一个新的、空白的、指定大小的 ImageData 对象。 新对象中默认像素值都是 transparent(透

使用requestAnimationFrame绘制动画 在canvas中的动画，我们可以理解为，canvas在一遍又一遍的绘制相同的东西。为了更好的适应人体的眼睛，我们绘制图像的间隔最好在16毫秒。

图像填充 canvas 除了使用颜色填充形状，也可以通过定义图案来填充形状。 与渐变一样，都是相对于当前坐标系绘制图案。 根据createPattern()绘制图像。函数的第二个参数，设置图片重复方向

创建一个新页面 新建一个barchart.html文件： Canvas元素是类似于DIV的块级DOM元素，因此您可以对其进行样式设置或定位，就像在页面中进行其他操作一样。 现在给画布添加一个背景颜色。

什么是画布 Canvas是HTML的2D绘图API，并且大多数浏览器都支持它。简单理解，就是浏览器在屏幕上为您提供了一个矩形区域，您可以在该区域画图。包括绘制线条，形状，图像，文本等。 创建一个画布