可视化
SVG、Canvas。。。
青岑lw
此后如竟没有炬火:我便是唯一的光。
展开
-
Canvas 使用 toDataUrl 导出图片的各类错误
前不久接到一个活动需求,用户拍照然后结合相应的素材生成另一张图片并分享传播。因为个人对 Canvas 很感兴趣就兴致勃勃的接下来了,后期遇到很多有意思的坑,分享一下。// 绘制上下文获取var doc = documentvar can = doc.getElementById('canvas')var ctx = can.getContext('2d')首先是获取用户的图片文件...原创 2018-03-30 15:14:00 · 19093 阅读 · 4 评论 -
SVG 详解(四)其他常用标签
文章案例 => 传送门clipPath-裁剪能限制哪些地方可见,哪些地方不可见。标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来)。剪切路径是用clipPath元素定义的,属性clip-path可用来引用剪切路径。默认情况下,一个形状,其被剪切掉的区域(不可见的区域)是不响应鼠标事件的。// 超出矩形区域将不会被绘制<svg width="120" height="120" vie原创 2018-04-22 23:20:25 · 6153 阅读 · 0 评论 -
SVG 详解(三)基础语法
本文介绍一些 SVG 的简单语法,如矩形、圆形、路径等。 文文涉及的全部示例 => 在这里rect-矩形// 语法很简单,x y 左上角起点坐标,width height 矩形长宽,rx ry 圆角// 绘图的填充等属性可以放在 style 里,也可以和 style 平级抽离为一个属性去描述,如这样:fill='red'<svg width="200" height=...原创 2018-04-19 23:23:44 · 7034 阅读 · 0 评论 -
SVG 详解(二)基本概念
SVG 实例// 一个 SVG 文件<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="1原创 2018-04-02 18:03:29 · 4241 阅读 · 0 评论 -
Svg 详解(一)背景
图片数字化背景将图片存储为数据有两种方案。其一为位图,也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度,反映在视觉上,就是颜色和亮度。这些信息有不同的编码方案,在互联网上最常见的就是 RGB 。根据需要,编码后的信息可以有不同的位( bit )数——位深。位数越高,颜色越清晰,对比度越高;占用的空间也越大。另一项决定位图的精细度的...原创 2018-04-02 10:57:40 · 3416 阅读 · 0 评论