![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Canvas/SVG
文章平均质量分 89
Canvas/SVG绘图基础
Ludwig1597
茨维格。
展开
-
SVG绘制基础图形学习笔记
2021.1.26文章目录SVG基础学习笔记位图和矢量图引入svgSVG形状SVG矩形SVG圆形SVG椭圆SVG线条SVG多边形SVG折线SVG路径SVG滤镜(未学)SVG渐变SVG线性渐变放射性渐变(未学)SVG基础学习笔记SVG 意为可缩放矢量图形(Scalable Vector Graphics)。SVG 使用 XML 格式定义图像位图和矢量图位图:由像素点组合而成的图像,放大会失真。矢量图:以数学向量方式记录图像,任意放大清晰度不变。引入svgsvg是基于xml的技术svg.原创 2021-01-26 17:24:40 · 310 阅读 · 0 评论 -
Canvas学习笔记(三)- 图片操作、坐标变换以及面向对象方式绘制可以用键盘控制的行走小人
2021.2.2 Canvas(三)文章目录Canvas学习笔记(三)第五章 图片操作概述drawImage()方法的三种调用方式实例:帧动画实例:用键盘控制的行走的小人第六章 变形操作(坐标变换)Canvas学习笔记(三)第五章 图片操作概述在Canvas中,我们可以使用drawImage()方法来绘制图片。Canvas中所谓的绘制图片,其实就是把一张图片在Canvas中显示出来。drawImage()方法共有三种调用方式:三参数、五参数、九参数。在使用drawImage()方法前,我们.原创 2021-02-03 16:26:44 · 568 阅读 · 1 评论 -
Canvas学习笔记(二)- 曲线图形、文本以及面向对象方式绘制饼状图
2021.1.31 Canvas(二)文章目录Canvas学习笔记(二)第三章 曲线图形曲线图形概述体验曲线的绘制圆弧扇形绘制一个圆分成N等分且颜色随机第四章 文本操作文本操作概述文本操作.方法()strokeText()fillText()measureText()文本操作.属性font属性textAlign属性textBaseline属性实例:在画布中心绘制一段文字第三、四章综合实例:面向对象方式绘制饼状图Canvas学习笔记(二)第三章 曲线图形曲线图形概述在Canvas中,基本图形包括.原创 2021-02-02 15:24:57 · 296 阅读 · 0 评论 -
Canvas学习笔记(一)-概述、直线图形和线条操作、面向对象的方式封装折线图、绘制正多边形
2021.1.29 Canvas(一)文章目录Canvas学习笔记(一)第一章 Canvas概述什么是Canvas?第二章 直线图形和线条操作Canvas坐标系直线的绘制一条直线两条平行线三条不同颜色不同宽度不同样式的平行折线绘制虚线绘制一个填充的三角形绘制一个中间镂空的正方形绘制一个从黑到白的渐变矩形采用面向对象的方式绘制折线图图形的绘制矩形用渐变方案绘制一个渐变的矩形绘制正多边形Canvas学习笔记(一)第一章 Canvas概述什么是Canvas?Canvas是HTML5新增的一个元素。C.原创 2021-01-31 19:46:57 · 210 阅读 · 0 评论