Canvas

  • wengjqwengjq/Blog· 10 月前 Canvas

    最近帮公司网站banner实现了几个动画特效,踩了一些坑,这里mark下,下面给个流星demo:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>canvas梦幻星空背景</title>
    	<style>
    		*{margin: 0;padding: 0;}
    		html,body{height: 100%;}
    		body{background: rgba(0, 0, 0, 0.9);}
    	</style
  • 写在最前

    本次的分享是一个基于canvas的更新图片特效实现。其中主要涉及canvas中getImageData()、putImageData()、toDataURL()方法的使用。效果请看下面。
    欢迎关注我的博客,不定期更新中——

    PS:请在本地服务器中打开页面,因谷歌浏览器中会有跨域问题,如需node静态服务器可以参照这个地址

    效果预览


    显示不出来可看这个地址
    https://user-gold-cdn.xitu.io/2017/7/6/0a5e704e63e2d410ea8b5d21565ba4dd?imageView2/0/w/1280/h/960

    点我查看源码仓库

    实现流程

    • 点击

  • 写在最前

    记得以前在人人上看到一个分享,讲解基于js的截图方案,详细的不记得了,只记得还挺有意思的貌似用了canvas?所以这次打算自己写一个分享给大家作者的思路。这只是一个很简陋的小demo如有bug请提issues。按照惯例po代码地址;以及作者博客的github仓库,不定期更新中——

    效果图

    整体思路

    1. 设置开始/结束快捷键
    2. 开始后将DOM绘制成canvas来覆盖原始DOM界面
    3. 添加一张canvas模拟鼠标截图区域
    4. 添加一张canvas用来绘制鼠标截图区域对应的浏览器界面(从第一张canvas中截取)
    5. 保存截取的图像

    1.设置开始/结束快捷键

    由于快捷键可能导致的冲突故希望开始快捷键

  • 写在最前

    本次分享一下使用canvas来进行视频播放并且添加弹幕功能。

    欢迎关注我的博客,不定期更新中——

    效果图

    示例源码见:源码地址
    ezgif com-optimize

    可以看到上方为一段视频,下面是用canvas来重新绘制的视频,并且支持动态的添加弹幕。

    canvas载入视频

    canvas中的drawImage方法绘制图片所需要的数据源不单单是某张图片,同样可以是使用视频的某一帧来进行绘制。就像这样:

    var video = document.getElementById('video')
    var canvas = document.getElementById('canvas');
    var ctx = canvas.g

  • 写在最前

    本次分享一下在canvas中将绘制出来的折线段的棱角“磨平”,也就是通过贝塞尔曲线穿过各个描点来代替原有的折线图。

    欢迎关注我的博客,不定期更新中——

    为什么要平滑拟合折线段

    先来看下Echarts下折线图的渲染效果:
    image
    一开始我没注意到其实这个折线段是曲线穿过去的,只认为是单纯的描点绘图,所以起初我实现的“简(丑)易(陋)”版本是这样的:
    image

    不要关注样式,重点就是实现之后才发现看起来人家Echarts的实现描点非常的圆滑,也由此引发了之后的探讨。怎么有规律的画平滑曲线?

    效果图

    先来看下最终模仿的实现:
    因为我也不知道Echarts内部怎么实现的(逃
    image.png
    image
    看起来已经非常圆润了,和我