腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端之攻略

专栏作者

376

文章

803317

阅读量

37

订阅数

svg画动态虚线

SVG画虚线相对canvas容易些 📷 <template> <div style="position:relative;"> <el-button @click="goggle">切换</el-button> <div>123</div> <svg> <polyline class="shap" points="20,20 40,25 60,40 80,120 120,140 200,180" stroke-dasha

2021-11-30

3.1K0

threejs之显示Label-CSS2DRenderer

html canvas 容器

1、采用threeJs的精灵（Sprite），具体用法查看我另一篇博客https://my.oschina.net/u/2612473/blog/3038066 2、使用CSS2DRenderer

2019-05-31

5.7K1

three.js 事件交互原

canvas event href location window

在three.js中，展示的一切内容都是在canvas中绘制的，所以点击事件点击到物体上是无法获取点击对象的，要获取点击的对象要使用RayCaster，用于在三维空间中进行鼠标拾取，原理是：相机与鼠标所在的设备坐标之间的连线经过哪些物体。

2019-05-07

3.8K0

three.js 事件交互

canvas alert event location window

在three.js中，展示的一切内容都是在canvas中绘制的，所以点击事件点击到物体上是无法获取点击对象的，要获取点击的对象，要使用RayCaster,是用于在三维空间中进行鼠标拾取，原理是相机与鼠标所在的设备坐标之间的连线经过哪些物体。

2019-04-22

14K3

three.js 带更新文字的旋转地球

查看旋转地球效果主要用到几个知识点（1）显示文字是使用了three.js 的精灵（Sprite），精灵的文字方向始终面向相机，文字是在canvas中画的，精灵的材质就是加载的带有文字的canvas function showText(){ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.canvas.width =256; const x =0;

2019-04-17

9.7K0

Canvas 的save()与 restore()的详细介绍

save()和restore()是用来保存和恢复canvas状态的，都没有参数。 Canvas的状态就是当前画面应用的所有样式和变形的一个快照。

2019-04-04

4.3K0

canvas之文字换行原

当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。

2019-04-04

1.3K0

canvas绘制闹钟-方法2 原

drawBackground()里面的ctx.save() 为什么不能放到上面的原因：一般ctx.save() 与ctx.restore()是成对出现的。ctx.save() 的作用是保存状态，ctx.restore()指弹出保存的状态来使用，如果此函数中没有ctx.save()，则在draw()中执行ctx.restore(); 就没有意义，因为没有已经保存的状态，导致绘图有问题。

2019-04-04

5440

canvas绘制闹钟-方法1 原

总结：角度旋转默认是按右边水平方向，向下旋转，现在逆时针把画布旋转90度，使旋转的起始位置在正上方，画布旋转后x轴与y轴也随着画布旋转而旋转；注意画好图之后再旋转画布，图上面画的图形不会旋转；

2019-04-04

8750

canvas像素操作原

编程算法 canvas

(adsbygoogle = window.adsbygoogle || []).push({});

2019-04-04

8640

canvas-颜色选择器原

（3）颜色信息的函数主要包括，获取鼠标所在点的位置，通过getImageData获取鼠标所在点的像素对象，并最终获得rgba信息

2019-04-04

9700

canvas动画-跟着鼠标移到的小球原

小球可以跟着鼠标移到，点击小球时会按既定的坐标移到小球（不再跟着鼠标移到），鼠标移出canvas，此时动画停止，鼠标进入动画时动画开始

2019-04-04

4560

Canvas基本动画-循环全景照片原

这是MDN上面的一个的例子，展现一个自左向右滑动的全景图，例子中采用的图片是一个尺寸大于canvas的图片

2019-04-04

7400

Canvas基本动画-太阳系的动画原

1、清空canvas 除非接下来要画的内容会完全充满canvas(例如背景图)，否则你需要清空所有，最简单的方法是使用clearRect方法 2、保存canvas状态如果你要改变一些会改变canvas状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下 3、绘制动画图形 4、恢复canvas状态如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧。

2019-04-04

8040

canvas之clip使用原

裁切路径和普通的canvas图形差不多，不同的是它的作用是遮罩，用来隐藏路径以外的部分。 clip() 将当前正在构建的路径转换为当前的裁剪路径，默认情况下，canvas有一个与它自身一样大的裁切路径（也就是没有裁切效果）

2019-04-04

6920

Canvas之使用图片原

canvas 编程算法

canvas有比较强的图片操作能力。可以用于动态的图像合成或者作为图形的背景。浏览器支持任意格式如PNG、GIF、或者JPEG，你甚至可以将同一个页面中的其他canvas元素生成的图片作为图片源(toDataURL("image/png")，canvas.toDataURL('image/jpeg', quality))

2019-04-04

1K0

Transform 的简单理解原

canvas css 对象存储

canvas里面的transfrom与css3中的基本是一样的，唯一的不同是原点，canvas的默认原点是图形的左上角，css3是图形的中心，

2019-04-04

6460

没有更多了

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态