作者：云荒杯倾 序 本意是用这个做视频遮罩效果，但是还是从更通用的角度来解释事情本身吧。少掺杂一点业务目的。 主要实现功能 在canvas画布上跟随鼠标的按键、移动画出拖拉范围内的矩形；弹出选择项，选“对勾”则将这部分矩形填上背景色，选“叉号”则取消本次拖拉的矩形。 代码块 代码不长，直接放。 引用 ...
分类：
其他好文 时间：
2020-05-07 20:12:51
阅读次数：
87
上个版本街道一个需求，使用url生成一个二维码，然后和另外一张图片合成一张图拍你，实现思路是这样的 使用jr-qrcode将url生成data:base64供img使用 然后使用canvas 将两张图合成一张图片 遇到的问题生成图片之后发现图片很模糊，解决办法是将canvas画布扩大两倍，其他参数也 ...
分类：
其他好文 时间：
2020-04-26 10:41:51
阅读次数：
76
我们先看看粒子时钟的效果，如下：下面我们将通过canvas和js实现，首先要创建一个html文件并添加一个canvas画布，如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl ...
分类：
其他好文 时间：
2020-04-23 23:01:19
阅读次数：
61
很火的echarts底层也是采用了这个; 1. 底层是canvas画图,比较快相对于svg, 写自己类图包含hover等操作注意分层 2. canvas画布各个浏览器支持大小有限; 3. 实现画布无限大, 采用了group概念, 所有元素绑定group, 鼠标滚动计算group的position位置 ...
分类：
其他好文 时间：
2020-04-17 15:55:33
阅读次数：
297
前言 因产品需求，需要在小程序中生成一张分享海报用于产品推广。特此记录一波产出过程~ 这次开发使用的是 uni-app 来产出小程序 Part.1 大致思路 按照设计图将所需元素全部画入 Canvas 画布，再利用 wx.canvasToTempFilePath(Object object, Obj ...
分类：
微信 时间：
2020-04-13 20:00:23
阅读次数：
96
## 使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）(如果要绘制其他图形，做一点小改动就行了) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <styl ...
分类：
Web程序 时间：
2020-04-01 13:03:36
阅读次数：
146
1、HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。 ...
分类：
其他好文 时间：
2020-03-20 10:53:28
阅读次数：
66
上周需要做一个把页面左侧列表内容拖拽到右侧区域，并且绘制成关系树的功能。看了设计图，第一反应是用canvas绘制关系线。吭哧吭哧搞定这个功能后，发现用canvas绘图，有一个很严重的缺陷。那就是如果左侧关系特别多，需要绘制成百上千条时，而canvas画布的宽高在写dom的时候就已声明。关系很多的情况 ...
分类：
其他好文 时间：
2020-01-18 12:44:40
阅读次数：
258
一：定义 什么是canvas canvas画布，使用js在网页上绘制图像 什么是svgsvg是可伸缩矢量图 二：使用 canvas使用 <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt ...
分类：
其他好文 时间：
2019-12-27 13:31:58
阅读次数：
73
原文:基于C# WPF框架的贪吃蛇 游戏开始界面 游戏开始 共有两条蛇，吃到红色食物加1分，吃到绿色毒食物减1分，知道0不减； 碰到墙壁游戏结束，碰到对方游戏结束，碰到自己游戏结束 此游戏通过Canvas画布布局，通过C#代码实现 游戏主界面大小为1200*1000 全局声明： Random ran... ...
