Canvas 学习
文章平均质量分 90
nie-ny
小小的前端
展开
-
学习 canvas (八)实现文字粒子效果
简介为了更好的使用canvas,实现文字粒子效果。主要是通过在缓存中创建一个canvas元素节点,把文本绘制在这个canvas节点上。然后使用getImageData()函数,获取canvas上的所有像数对应颜色的值。根据像数颜色值,判断在什么位置生成粒子。文本绘制<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equi原创 2021-09-02 17:34:01 · 782 阅读 · 0 评论 -
学习 canvas (七)实现圆球水波进度
简介为了更好的使用canvas,动手实现一些小功能是很有必要的。这里主要使用clip()函数,实现水波只在裁剪后的圆中绘制,来实现圆球的水波进度。绘制水波曲线水波曲线最简单的生成公式就是使用三角函数。这里使用Math.sin()来生成曲线。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compa原创 2021-09-02 17:33:14 · 822 阅读 · 0 评论 -
学习 canvas (六)制作简单的 - 飞机大战小游戏
简介经过前面的学习,我们基本掌握了常用的api和绘画技巧。现在通过实现一个小游戏,来深入了解画布在项目中如何使用。游戏基本介绍用户有一艘宇宙飞船,可以用箭头键左右移动,用空格键开火。屏幕顶部的敌人飞船来回移动,同时随机发射导弹。然后根据导弹和飞船的碰撞,来判断用户的飞船或的人的飞船,在什么时候被击杀。绘制游戏背景...原创 2021-06-03 08:57:38 · 1315 阅读 · 0 评论 -
学习 canvas (五) 像素缓冲区和其他效果
使用createImageData() 创建像素缓冲区createImageData 创建一个新的、空白的、指定大小的 ImageData 对象。 新对象中默认像素值都是 transparent(透明的)。两个参数时,第一个参数 ImageData 新对象的宽度,第二个参数 ImageData 新对象的高度。一个参数时,传入参数为ImageData 对象。从现有的 ImageData 对象中,复制一个和其宽度和高度相同的对象。图像自身不允许被复制。生成黑白交替的纹理<!DOCTYPE h原创 2021-06-03 08:57:10 · 289 阅读 · 0 评论 -
学习 canvas (四) 绘制动画
使用requestAnimationFrame绘制动画在canvas中的动画,我们可以理解为,canvas在一遍又一遍的绘制相同的东西。为了更好的适应人体的眼睛,我们绘制图像的间隔最好在16毫秒。当然在JavaScript中setInterval()函数也可以实现间隔16毫秒后继续绘制,不过它将始终以相同的速度绘制,而不管用户使用的是哪种浏览器,用户在做什么。会导致,它可以工作,但是效率不高。requestAnimationFrame 浏览器在下次重绘之前调用指定的回调函数。在某个时候,当浏览器准备原创 2021-06-03 08:56:40 · 8584 阅读 · 1 评论 -
学习 canvas (三) 常用的绘图技巧
图像填充canvas 除了使用颜色填充形状,也可以通过定义图案来填充形状。<!DOCTYPE html><html lang="en"> <body> <canvas width="500" height="500" id="canvas"></canvas> <script type="text/javascript"> // 获取元素DOM var canvas = document原创 2021-06-03 08:56:21 · 356 阅读 · 0 评论 -
学习 canvas (二) 绘制图表
创建一个新页面新建一个barchart.html文件:<!DOCTYPE html><html lang="en"> <body> <canvas width="500" height="500" id="canvas"></canvas> <script type="text/javascript"></script> </body></html>Canvas元素原创 2021-06-03 08:55:49 · 1631 阅读 · 0 评论 -
学习 canvas (一) 基础信息
什么是画布Canvas是HTML的2D绘图API,并且大多数浏览器都支持它。简单理解,就是浏览器在屏幕上为您提供了一个矩形区域,您可以在该区域画图。包括绘制线条,形状,图像,文本等。创建一个画布<!DOCTYPE html><html lang="en"> <body> <canvas width="500" height="500" id="canvas"></canvas> <script>原创 2021-06-03 08:55:20 · 277 阅读 · 0 评论