![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas
文章平均质量分 74
V。on
这个作者很懒,什么都没留下…
展开
-
canvas之刮刮乐
说到刮刮乐,先让我们了解一下canvas合成。效果如下:效果如下(画出的矩形只显示路径在圆形里的):效果如下:在这里插入图片描述全局合成示例之刮刮乐:效果如下:参考链接原创 2022-10-11 17:52:01 · 504 阅读 · 0 评论 -
html转canvas创建Marker
在之前的项目中,需要实现Marker不穿墙的问题,这个可以采用canvas的方式来实现,但是呢,有的一些建筑顶牌不止是单纯的建筑名称,还需要有一些其他的数据展示,甚至有可能是表格,这个时候使用canvas去画出这样的页面,就有一些耗费时间了。这样就可以大大的加快速度。:读取网页上的目标DOM节点的信息绘制成canvas,但需要注意的是,它不支持一些CSS3的属性,这个可以参考。那么我们在项目中,如何在vue中使用它,来达到我们的目的呢?其次,我们需要一个vue组件,以下简单举例,接收一个参数。原创 2022-10-08 17:10:20 · 575 阅读 · 0 评论 -
canvas之时钟
在画时钟之前,我们先来聊一聊canvas动画。驱动动画的方法有以下三种:那么我们制作canvas动画使用哪种更好呢?所以在制作canvas动画时,更推荐使用。制作canvas动画的步骤:那么就让我们看看时钟的动画制作吧:效果如下:原创 2022-07-01 15:35:56 · 275 阅读 · 0 评论 -
canvas基础二
canvas基础一、文本1.1 文本绘制方法填充文字 fillText(text, x, y, maxWidth)描边文字 strokeText(text, x, y, maxWidth)1.2 文本属性字体:font可以设置文本的粗细、字号、字体ctx.font = 'bold 100px Arial'水平对齐: textAlignconst canvas = document.getElementById('canvas')canvas.width = window.原创 2022-06-30 15:09:16 · 381 阅读 · 0 评论 -
canvas之霓虹灯
霓虹灯原创 2022-06-30 10:41:32 · 208 阅读 · 0 评论 -
canvas基础
canvas基础一、canvas是什么广义:H5新增canvas 2d绘图功能在html中:canvas是html标签需要用js在canvas里绘制图形canvas可以理解为一张画布二、绘制基本图形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas绘图</title> <style原创 2022-05-26 11:04:13 · 301 阅读 · 0 评论