canvas
7篇文章 · 0订阅
  • 基于canvas开发吸色功能
    之前有听到同事说，我想自由的拿到设计图中的某个颜色，我要告诉设计同事帮我取出来，似乎听着有些小麻烦。敲敲小黑板~那么今天就给大家分享一项新开发的功能，基于canvas开发的取色器，让我们一起来揭开这层神秘面纱吧。 首先在查看稿件页，用户可以点击右下方吸色图标，进入取色状态，鼠标…
    JavaScript
  • 深入了解canvas在移动端绘制模糊的问题
    由于一些移动端的兼容性原因，我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决，我们采用了pdf.js这个插件，该插件可以将pdf转换成canvas绘制在页面上。不过，在测试过程中却发现，在移动端的浏览器上，绘制的内容展示十分模糊（如下图），经过分析之…
    JavaScript
  • 解决canvas合成图片大小错误、模糊以及跨域的问题
    最近要做一个生成海报的h5, 原理就是用canvas的drawImageAPI把图片画出来，想着应该很简单，却发现里面有大坑。在填完坑后分享下解决方案，文章主要围绕以下两个问题来展开。 1. demo初试 2. canvas大小错误以及模糊 在浏览器的 window 对象中有一…
    CSS 前端 Canvas
  • canvas手写辨色力小游戏
    界面写得丑，忘轻喷。。。 这样我们基本就完成了游戏的大概了。 然后我们就能实现下一关的操作，重新再绘制游戏网格，重新生成新的颜色和位置了。 通过这个小游戏，可以学习到，canvas点击事件的监听和实现，因为canvas只是一张画布是一个状态机，没法通过dom一样直接操作，但是通…
    Canvas 游戏 前端
    canvas手写辨色力小游戏
  • 用 canvas 的 getImageData 做点有趣的事
    canvas 可以实现对图像的像素操作，这就要说到 getImageData() 方法了。 CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始…
    前端 Canvas 算法
    用 canvas 的 getImageData 做点有趣的事
  • 图像处理的滤镜算法
    就是RGB三种颜色分别取255的差值。 rgb三种颜色取三种颜色的最值的平均值。 高斯模糊的原理就是根据正态分布使得每个像素点周围的像素点的权重不一致，将各个权重（各个权重值和为1）与对应的色值相乘，所得结果求和为中心像素点新的色值。我们需要了解的高斯模糊的公式：
    前端 算法
    图像处理的滤镜算法
  • 学习 canvas 的 globalCompositeOperation 做出的神奇效果
    最早知道 canvas 的 globalCompositeOperation 属性，是在需要实现一个刮刮卡效果的时候，当时也就是网上找到刮刮卡的效果赶紧完成任务就完了，这次又学习一次，希望能加深理解吧。 先来看下 canvas 的 globalCompositeOperatio…
    前端 Canvas