canvas
关注
分享
扫一扫
文章平均质量分 60
liu__software
这个作者很懒，什么都没留下…
展开
-
echarts3d饼图
版权声明：本文为CSDN博主「Grocery store owner」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。使用时，需要引入pieChart.js里的getPie3D, getParametricEquation。echarts社区地址：http://www.ppchart.com/#/使用npm下载或cdn引入echarts，echarts-gl，新建一个js文件pieChart.js，以便于调用。版本：“echarts”: “^5.1.2”转载 2023-09-07 11:02:12 · 675 阅读 · 0 评论 -
HTML5 Canvas的点击区域检测以及如何监听Canvas上各种图形的点击事件
作者：Anton Lavrenov你是否需要一个在Canvas画布上的任意图形的点击事件监听（译者注：类似于任意一个DOM元素的点击监听事件）？但是Canvas没有此类监听器的API。你只能在整个Canvas画布上进行事件监听，而不是在画布上的任意一个元素。我将描述2种方法来解决这个问题。注意！我将不会使用，因为现在（作者写文章时间为2017年）这个api是不稳定的，并且并没有被完整的支持。但是你可以了解下。让我们从简单的canvas画布图形开始。假设我们在一个页面上绘制了几个圆圈（circle）。转载 2023-03-01 12:35:42 · 5294 阅读 · 0 评论 -
canvas给文字增加阴影效果
【代码】canvas给文字增加阴影效果。转载 2022-11-09 00:03:36 · 610 阅读 · 0 评论 -
canvas绘制获得文字高度方案-文本的高度
最近在做智能图片相关问题，关于文字高度居中方案反复做了不少尝试。canvas有textAlign和textBaseline两个属性设置文字的对应方式。但是这两个属性是用来设置文本内整体的对齐方式，无法实现在在一个整体居中。文字结构：就像是写字的时候一样，分为上中下田子方格。真正的字体区分中文，英文的大小写，在上下两行，不同的字，在上下结构中，并没有占据完全，或者说文字中存在一定的阴影，会有存在一定的像素值。转载 2022-11-09 00:01:02 · 4832 阅读 · 0 评论 -
html5中怎么使用canvas画空心圆与实心圆
这篇文章主要介绍“html5中怎么使用canvas画空心圆与实心圆”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html5中怎么使用canvas画空心圆与实心圆”文章能帮助大家解决问题。转载 2022-11-08 23:31:42 · 1723 阅读 · 0 评论 -
canvas实现水印效果
二、使用canvas的toDataURL方法导出图片的base64的代码，使用css background-repeat属性将图片作为背景进行填充。创建一个与窗口大小一致的画布，然后使用canvas的fillText的方法绘制水印。1. 画布不能覆盖网页上的有效事件，因些需要给canvas设置。转载 2022-11-08 23:28:21 · 1117 阅读 · 0 评论 -
echarts自定义滚动条
echarts自定义滚动条转载 2022-11-07 23:09:18 · 809 阅读 · 0 评论 -
单击Echart饼图实现数据钻取
使用场景和需求： 第一层饼图显示党员党龄分布的情况。 点击某个党龄段，查看拥有该党龄段的党支部。 默认显示3个党支部，余下的党支部合并为其它，点击其它，查看余下的党支部。 点击某个党支部，返回第一层饼图。技术原理： 依靠Echart 点击事件的绑定，通过获取不同的参数向.net后端发送请求获取不同的数据，再将数据重新加载到Echart饼图中。步骤概述： 1、初始Echart图表 2、在页面中定义函数转载 2022-05-18 09:21:21 · 1649 阅读 · 0 评论 -
ECHARTS Y轴文本过长，设置超出隐藏，然后显示省略号，并且鼠标悬浮上之后显示全部
ECHARTS 标签中文本内容太长的时候怎么办 ?看如下两块有分别说明：具体代码如下：<!--引入js文件--><script src="${ctx}/tiles/echarts/echarts.common.min.js"></script> //echarts容器<!--html代码--><div id="charts2" style="width: 99%; height: 390px; margin: 3px转载 2022-05-18 09:18:14 · 4849 阅读 · 2 评论 -
关于echarts套娃柱状图（嵌套柱）的实现
嘻嘻嘻先上图看效果：是不是有一种套娃的感觉。这个图表的实现其实就是多个柱状图叠在一起，然后个别设置宽度，重点看 xAxis 和 series -> xAxisIndex 的对应。注意：由于有多个 xAxis，所以对于 tooltip -> formatter 的格式重置也是很重要的。 var myChartc = echarts.init(document.getElementById('echarts')); // 显示标题，图例和空的坐标 .转载 2022-05-18 09:12:20 · 1925 阅读 · 0 评论 -
Canvas createLinearGradient文本填充线性渐变的使用详解
前言在 canvas 中对文本填充水平或垂直的线性渐变可以轻易实现，而带角度的渐变就复杂很多；就好像下面这样，假设文本矩形宽为w, 高为h, 左上角坐标为x, y。猜想与答案给出两个答案：正确答案是图二，因为这样得出来的坐标生成的渐变最紧接文本矩形边界，它的运动轨迹如下动图：(图来源：do you really know css linear-gradients）渐变起点与终点坐标的计算所以，渐变的起点与终点坐标该怎么计算呢？答:先求得起点与终点的长度（距离...转载 2022-05-17 14:48:36 · 998 阅读 · 0 评论 -
canvas 2D炫酷动效的实现套路和需要的技术积累
一、放在开头的结束语我上学时候，06，07年的样子，总是情不自禁被炫酷的flash动效吸引。印象很深的是一个一堆线和球连在一起弹来弹去的效果，觉得还厉害，实现这个效果的人一定是大牛，然后，反编译工具去查看这些酷酷的动态是怎么实现的。我这一看里面的源代码，我勒个擦，洋洋洒洒，代码认得我，我不认识它。但是，通过改改元素，以及一些数值参数，也能实现了类似的效果，并沾沾自喜，以为自己学到了技术，还好，我没这么走下去。其实现在很多前端小伙伴，跟我当时的做法很类似，去网上找插件，找工具，找现成代码，然后改改用用转载 2022-05-17 14:45:45 · 1393 阅读 · 0 评论 -
Canvas绘制虚线setLineDash方法说明
调用函数setLineDashvoid ctx.setLineDash(segments);segments一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。function drawDashedLine(pattern) { ctx.beginPath(); ctx.setLineDash(pattern); ctx.转载 2022-05-17 14:43:50 · 2865 阅读 · 0 评论 -
快过年了，用五种不同的JS特效带你看烟花
今天给大家带来几个好看的基于 HTML+CSS+JS 的烟花特效雪花、 樱花 、 浪漫贺卡 以及 圣诞树 我前段时间刚做过，感兴趣的也可以看看我前几期的博客：雪花：https://haiyong.blog.csdn.net/article/details/105786233樱花：https://haiyong.blog.csdn.net/article/details/122008942圣诞树和贺卡：https://haiyong.blog.csdn.net/article/details/12转载 2022-02-23 16:28:11 · 6175 阅读 · 0 评论 -
详述Canvas(五)/绘制圆角矩形
之前做的react项目 做了一个分享图片功能，分享的图片上有二维码，和个人信息等内容，二维码用的 qrcode.react 组件，但是图片上的元素必须要用canvas 绘制上去，canvas api 好久之前看过，但是基本没用过，忘的也七七八八了，临阵抱佛脚！其中用到了一个绘制圆角矩形的 方法，搜索之后找到了这篇文章，写的很不错，附带原文链接https://blog.csdn.net/liuyan19891230/article/details/51259147Canvas并没有提供绘制圆角矩形的.转载 2022-02-23 15:33:33 · 9582 阅读 · 0 评论 -
echarts获取坐标轴的最大值
最近在做一个统计图需要用到Y轴坐标的最大值，并且这个最大值是由echarts自动生成的。本人查找资料良久，终于找到了一个解决方案，亲测可用，废话不多说，直接上代码：myChart.setOption(option);//获取Y轴的刻度范围var rangeY = myChart.getModel().getComponent('yAxis').axis.scale._extent;//获取X轴的刻度范围var rangeX = myChart.getModel().getComponent('转载 2022-02-23 15:22:35 · 6121 阅读 · 2 评论 -
echarts 简单词云制作，自定义图案词云echarts-wordcloud.js
echarts词云依赖echarts-wordcloud.js，git地址：https://github.com/ecomfe/echarts-wordcloud第一种、简单一、html<div id='patent-hot-word1'></div><script src="public/echarts/echarts.js"></script><script src="public/echarts/echarts-wo.转载 2022-02-23 15:20:38 · 7283 阅读 · 0 评论 -
关于echarts 日期堆叠问题日期转数字时间戳
在使用echarts的过程中想要做一个日期堆叠效果图所以直接选用了time方法,后面的数组都使用了日期作为格式,结果所有项都是原点开始走。百度了些找到的都是通过设置类型为category配合数组，作者自己也说不准确。官网找到的是value类型的实例。说到这里就知道了，时间是可以转时间戳的，时间戳是数字。解决方法：1.将所有时间转为时间戳2.x轴设置min和max3.x轴设置formater 毕竟这个时候都是数字 将时间戳转日期显示。4.每个柱状的结束日期需要注意：因为数字堆叠，这个转载 2022-02-23 15:06:48 · 1270 阅读 · 0 评论 -
canvas笔记-文本（fillText）旋转（rotate）
这里fillText直接使用rotate会有问题。估计是旋转中心有问题。正确的逻辑为：先使用translate移动中心点在文本起始位置，如何在0，0处fillText即可。如果要在字符串中心进行旋转，则需要获取字符串长度，translate的时候x进行+，y轴进行-即可。程序运行截图如下：绿色的为原始字符串，红色是从顶部进行旋转，绿色为在中心进行旋转。代码如下：<!DOCTYPE html><html lang="en"><h.转载 2021-12-21 15:19:12 · 3798 阅读 · 0 评论 -
学习 HTML5 Canvas 这一篇文章就够了
一、canvas 简介<canvas>是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应...转载 2021-04-21 14:56:11 · 610 阅读 · 0 评论 -
three.js事件绑定插件--onEvent
Three.js是构建web3d场景非常流行的框架，利用three.js我们可以更优雅地创建出三维场景和三维动画，本文主要针对three.js的点击事件以及相关插件进行介绍。最近在使用three.js开发Web3d的时候，想要给的3d物体添加onclick事件，查遍了three的官方文档发现，three.js的mesh（3d网格）没有类似HTML里dom的addEventListener的绑定事件，只提供了一个Raycast类进行物体拾取，引用three.js中文文档介绍如下：光线投射器（Raycas转载 2020-12-22 11:49:42 · 1840 阅读 · 1 评论 -
three.js 事件交互
点击查看交互效果在three.js中，展示的一切内容都是在canvas中绘制的，所以点击事件点击到物体上是无法获取点击对象的，要获取点击的对象要使用RayCaster，用于在三维空间中进行鼠标拾取，原理是：相机与鼠标所在的设备坐标之间的连线经过哪些物体。var raycaster = new THREE.Raycaster();var mouse = new THREE.Vector2(); function onMouseMove( event ) { // 将鼠标位置归一化为设备坐转载 2020-12-22 11:48:23 · 1350 阅读 · 0 评论 -
10款面向HTML5 画布(Canvas)的JavaScript库
10款面向HTML5 画布(Canvas)的JavaScript库1.Processing.jsProcessing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下，可以实现程序图像、动画和互动的应用。Processing.js是轻量，易于了解掌握的理想工具，可用于可视化的数据，创建用户界面和开发基于Web的游戏。2.FABRIC.JSFABRIC.JS是一款简单而强大的JavaScript Canvas 库，提供了互动的对象模型，同时还包含 Canvas-to..转载 2020-12-22 11:45:36 · 1325 阅读 · 0 评论 -
ECharts 3.0底层zrender 3.x源码分析3-Handler（C层）canvas事件
这一篇，介绍下Handler处理机制。Handler负责事件处理,包括’click’, ‘dblclick’, ‘mousewheel’, ‘mouseout’, ‘mouseup’, ‘mousedown’, ‘mousemove’, ‘contextmenu’等。我们知道canvas API没有提供监听每个元素的机制，这就需要一些处理。处理的思路是：监听事件的作用坐标（如点击时候的坐标），...转载 2020-04-20 11:17:22 · 609 阅读 · 0 评论 -
如何在Canvas中添加事件
如何在Canvas中添加事件作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时项目中肯定都用过许多Canvas的框架，我们发现事件在这些框架中已经使用的十分成熟了，而且并没有出现特别严重的问题。那么我们可以肯定的是，事件在Canvas中并不是一个无法触及的事情。一个傻瓜式...转载 2019-11-29 11:22:17 · 1056 阅读 · 1 评论 -
使用HTML5 Canvas API中的clip()方法裁剪区域图像
这篇文章主要介绍了使用HTML5 Canvas API中的clip()方法裁剪区域图像的实例教程,其中需要特别注意save()和restore()方法的搭配使用,需要的朋友可以参考下使用Canvas绘制图像的时候，我们经常会想要只保留图像的一部分，这是我们可以使用canvas API再带的图像裁剪功能来实现这一想法。Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该路径内所包含区域...转载 2018-05-24 11:34:26 · 12023 阅读 · 0 评论