js中自定义渐变函数的应用

js中自定义渐变函数的应用 这个是很久之前做的东西了,今天翻以前的demo的时候突然发现的,觉得还不错,分享出来大家都学习一下。 首先做这个demo的背景: 我们公司制作的webapp中对于图片滤...

Canvas下雪效果实现

适逢双旦,也许有些眼尖的网友已经发现本博悄悄上线的下雪效果,这里简单的记录一下其实现。 其实用js来写一个下雪效果并不难,但是如果要兼顾到效果的逼真度,流畅度,用户体验那就需要好好思考一下了,至少...

基于canvas的前端图片真实旋转

对于前端图片的旋转,我们一般会利用css来旋转,但是css旋转有一些问题,比如旋转的图片外层有一个容器是通过图片的宽高撑开的,当图片旋转后,就会出现一个非常诡异的现象图片和容器的框分离了,而容器的...

canvas绘制漫天飞舞的樱花

首先,先看效果。 猛戳这里查看效果 接下来,我们看看具体怎么实现这个效果 第一步,我们先画出一棵树的主体。 画树的使用的原理是,定义一个起始点,从这个点开始,向一个角度移动一段距离。得到另一个点。...

Canvas绘制箭头

Canvas的 CanvasRenderingContext2D 对象中是没有提供绘制箭头的方法,也就是说,如果我们需要在Canvas中绘制箭头是需要自己封装函数来处理的。今天的主题就是来看怎么封...

Canvas画文本自动折行

一直以来,如何在canvas中绘制text的时候自动折行都是一个比较困扰的问题,今天终于发现了一种比较好的办法。 具体思路: 先将输入文字内容的每个字符拆分成单个元素(比如span),再将这些元素...

巧用canvas实现网页截图

将DOM内容HTML绘制到画布中是有可能的,但如何有把握并且安全地实现它,就应该按照规范行事。你不能把HTML画到canvas上。相反,你需要使用一个SVG图像,其中包含你想要呈现的内容。可以使用...

canvas模拟妙味课堂拖动验证码

很久没写博客了,很紧张,很忐忑。 其实一直记挂着,也总想发点什么,不是没有内容说,当然时间也不是最主要的原因,就像某位博友所说时间就像乳沟,挤一挤,总会有的,归根结底,一个字,懒!相比之前自己确实...

使用Canvas绘制简单的立方体

Canvas的2D绘图环境对于3D图形比较立方体的绘制是很欠缺的,虽然我们可以用canvas的3D绘图环境webgl来绘制3D图形,但是webgl太复杂了,有点难整,我们也可以选用webgl的封装...