• 认真地记录技术中遇到的坑!

canvas实现水波纹效果

canvas实现水波纹效果
本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效。 水波基本原理 首先复习一波高中物理知识。 波是指振动的传播。波的传播方向与质点振动方向垂直的为横波,相同则为纵波,水波是横波和纵波的叠加。 对于水波这种波,我们在实现这个特效的时候,需要考虑到下面的特性: 圆……继续阅读 »

悠悠 9个月前 (03-11) 1253浏览 1评论 29个赞

canvas API总结

canvas API总结
从简单的基本图形,到复杂炫酷的动画,通过canvas元素获取的2D图形渲染上下文CanvasRenderingContext2D,能够使用丰富的API来进行图形绘制。这篇文章将会总结在之前的canvas教程中用到的所有渲染上下文的API。 可以参考之前的教程: 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考:canv……继续阅读 »

悠悠 9个月前 (03-07) 412浏览 0评论 1个赞

canvas动画

canvas动画
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考:canvas图形变换 如何设置基本图形颜色和样式可以参考:canvas样式和颜色 如何使用外部图片以及图形组合可以参考:canvas使用图片,图……继续阅读 »

悠悠 9个月前 (03-05) 387浏览 0评论 2个赞

canvas图像保存

canvas图像保存
通过前面的章节,我们能够在canvas画出各种炫酷多样的图形,但是这些画好的图像如何保存下一次使用呢?这篇文章将会探讨如何保存和加载canvas画布上的图像。 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考:canvas图形变换 如何设置基本图形颜色和样式可以参考:canvas样式和颜色 如何使用外部图片以及图形组合……继续阅读 »

悠悠 9个月前 (03-02) 502浏览 0评论 0个赞

canvas使用图片,图形组合以及裁剪

canvas使用图片,图形组合以及裁剪
这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动,旋转,缩放等变形方法,还会介绍如何在canvas中加载图像,图形之间的组合方式以及裁剪。 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考:canvas图形变换 如何设置基本图形颜色和样式可以参考:canvas样式和颜色 canvas系列教程可以参考:can……继续阅读 »

悠悠 9个月前 (03-02) 1114浏览 0评论 2个赞

canvas图形变换

canvas图形变换
这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动,旋转,缩放等变形方法,还会介绍如何在canvas中加载图像。 状态的保存和恢复 为了在变形之后,能够将图形恢复原样,需要保存图形的原有状态: save() restore保存和恢复canvas状态,都没有参数。 可以调用任意多次save方法 每一次调用restore方法,上一个保存的状态就从栈中……继续阅读 »

悠悠 9个月前 (03-02) 487浏览 0评论 0个赞

canvas样式和颜色

canvas样式和颜色
在上一篇文章中,我们可以通过canvas绘制基本的图形,这些图形的颜色都是默认的,这篇文章将会介绍如何设置图形的颜色行样式,使得绘制的图形更加炫酷! 色彩 Colors 通过设置canvas上下文的两个颜色属性,可以给绘制的图形上色: fillStyle = color 设置图形的填充颜色 strokeStyle = color 设置图形轮廓的颜色 ……继续阅读 »

悠悠 9个月前 (03-01) 505浏览 0评论 0个赞

canvas基本图形绘制

canvas基本图形绘制
概述 我们可以通过HTML中的canvas画布画出丰富多彩的图形甚至动画,你只需要: 在HTML中放置一个canvas标签 在HTML的JavaScript代码中获取这个canvas标签元素 通过获取的canvas元素,获取一个渲染上下文 通过获取的渲染上下文可以在画布上任意挥洒图画 另外需要注意的是,并不是所有浏览器都支持 canvas 元素,所以需要……继续阅读 »

悠悠 9个月前 (03-01) 610浏览 0评论 0个赞