canvas主题的文章列表，还有canvas的技术要点_第4页

js使用html2canvas实现页面截图并保存图片

最近在项目中碰到了一个需求是要求把当前页面当成图片下载到本地供首页banner图展示，当时看到需求，一直在找怎么把当前页面导成图片的方法，但是试了很多方法都没成功（原谅我还是很菜,哈哈），这时候在网上看到个帖子，类似是做屏幕截图，下载到本地，于是我找到了一个名叫‘html2canvas’的工具，试了之后，完...

代码星球 ·2020-12-24

如何在Canvas中添加事件？

作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时项目中肯定都用过许多Canvas的框架，我们发现事件在这些框架中已经使用的十分成熟了，而且并没有出现特别严重的问题。那么我们可以肯定的是，事件在Can...

代码星球 ·2020-12-24

利用canvas实现环形进度条

前提：有时候在项目中会有用到进度条的情况，使用css3也可以实现，但是对于性能不好的设备，或者网络不好的情况下，卡顿现象非常明显，避免出现不流畅的尴尬情况，所以记录一下，使用canvas来实现的方法。效果图： DOM中，首先定义canvas画板元素： <canvasid...

代码星球 ·2020-12-24

使用html5 canvas绘制圆形或弧线

在html5中，CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法，请参考以下属性和方法介绍：arc(x,y,radius,startRad,endRad,anticlockwise)在canvas画布上绘制以坐标点 (x,y)为圆心、半径为 radius的圆上...

代码星球 ·2020-12-24

canvas.toDataURL()报错的解决方案全都在这了

报错详尽信息UncaughtDOMException:Failedtoexecute'toDataURL'on'htmlCanvasElement':Taintedcanvasesmaynotbeexported. 前言最近在做一个创意类的图片合成工具，大概齐就是通过拼接自定义的文字和图片信息生成一张商品图片...

代码星球 ·2020-12-24

利用canvas实现转盘抽奖

最近工作中重构了抽奖转盘，给大家提供一个开发转盘抽奖的思路需求1、转盘根据奖品数量不同而有变化 2、canvas 目录结构由于业务需要所以开发了两个版本抽奖，dom和canvas，不过editor.js部分只能替换图片，没有功能逻辑。需要注意的是此目录隐藏了一个动态数据类(d...

代码星球 ·2020-12-24

javascript实例教程：使用canvas技术模仿echarts柱状图

canvas画布是html5中新增的标签，可以通过js操作canvas绘图API在网页中绘制图像。百度开发了一个开源的可视化图表库ECharts，功能非常强大，可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。很多项目都有使用过ECharts开发过图表功能。本实例教程使用原生js教你开发一个仿ECharts...

代码星球 ·2020-12-24

Canvas接口和动画效果大全

<canvas>元素用于生成图像。它本身就像一个画布，JavaScript 通过操作它的API，在上面生成图像。它的底层是一个个像素，基本上<canvas>是一个可以用 JavaScript 操作的位图（bitmap）。它与SVG图像的区别在于，<canvas...

代码星球 ·2020-12-24

监听Canvas内部元素点击事件的三种方法

约定本文介绍的三种方法适用于识别canvas内形状不规则而且位置无规律的图形点击事件，对于形状规则或者位置有规律的场景，肯定有更简便的实现，这里不做讨论。像素法像素检测法的思路是，将canvas中的多个图形（如果有多个的话）分别离屏绘制，并用getImageData()方法分别获取到像素数据保存起来。当ca...

代码星球 ·2020-12-24

canvas的使用方法

了解canvas：canvas标签是用作图形绘制，但是通过js脚本来实现的，canvas标签其实只是一个容器，最终实现绘制功能肯定是通过js脚本实现。首先肯定要定义一个canvas标签当做容器<canvasid="myCanvas"width="200"height="100"></canvas>...

代码星球 ·2020-12-10

微信小程序-canvas组件层级问题

微信小程序在文档中也有描述 native-component大致意思是：canvas组件在微信小程序中属于原生组件，而原生组件层级是最高的，多个同时加载的原生组件，谁加载的越慢谁的层级越高，-_-||解决方法　　1.文档中给出 cover-view 和 cover-i...

代码星球 ·2020-12-07

jsPDF将html页面生成pdf文件的前端解决方案及html2canvas如何真正解决跨域图片的问题

　　jsPdf是一个可以把html转成pdf的插件，有人多人在用。GitHub:https://github.com/MrRio/jsPDF官方文档:http://raw.githack.com/MrRio/jsPDF/master/docs/　　但是老外做的很多东西没考虑过英文之外的语言，这个也不例外，不支持中文，而...

代码星球 ·2020-11-21

用canvas实现手写签名功能

最近开发网站有一个需求，要求页面上有一块区域，用户能用鼠标在上面写字，并能保存成图片base64码放在服务器。这样的需求用canvas实现是最好的。需要用到canvas的以下几个属性：beginPath创建一个新的路径globalAlpha设置图形和图片透明度的属性lineWidth设置线段厚度的属性（即线段的宽度）s...

代码星球 ·2020-09-17

canvas霓虹雨

在codepen上看到一个Canvas做的下雨效果动画，感觉蛮有意思的。就研究了下，这里来分享下，实现技巧。霓虹雨: http://codepen.io/natewiley/full/NNgqVJ/Canvas动画基础大家都知道，Canvas其实只是一个画板。我们可以应用canvas的api在上面绘制各种图形...

代码星球 ·2020-09-12

canvas 截图

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>截图</title><style></style><scriptsrc="https://a...

代码星球 ·2020-09-06