• canvas-svg
• 小程序

1.图片绘制到canvas <canvas type="2d" id="canvas"></canvas> <view catchtap="canvasSave">保存到相册</view> onLoad: function (options) { wx.createSelectorQuery() .select(‘#canvas’) .fields({ node: true, size: true, }) .exec(this.drawInit.bind(this)) }, drawInit: function (res) { const width = res[0].width const height = res[0].height const canvas = res[0].node const ctx = canvas.getContext(‘2d’) const dpr = wx.getSystemInfoSync().pixelRatio const canvasWidth = width * dpr const canvasHeight = height * dpr canvas.width = canvasWidth c…

1.svg标签直接在页面中 svg { fill: currentColor; //currentColor为css变量，自动读取当前元素颜色 } 2.通过img引入的svg文件 此时css对svg文件无法生效，此时要用到CSS3滤镜filter中的drop-shadow，通过生产一个可指定颜色的阴影放置于svg的位置，并将原始svg移出视线 <img src="img/success.svg"> img{ position: relative; left: -80px; filter: drop-shadow(#fff 80px 0); } 备注：drop-shadow可用于png图片变色

1.Canvas 状态的保存和恢复 Canvas的API提供了两个名叫save()和restore()的方法，用于保存及恢复当前Canvas绘图环境的所有属性。其中save()可以保存当前状态，而restore()可以还原之前保存的状态。 这两个方法再绘图中有着重要的作用，比如我们在绘图的时候需要使用多种颜色，颜色需要不时的切换。那么使用save()和restore()方法即可比较方便的实现此功能。 2.理解save()和restore() 对于save()和restore()方法，一开始有一个错误的理解，以为每一步都save()之后restore()就等同于command + z（或者ctrl + z），其实save()保存的只是CanvasRenderingContext2D对象的状态以及对象的所有属性，并不包括这个对象上绘制的图形。 3.Canvas中状态和非状态 在Canvas环境中绘图时，可以利用所谓的绘图堆栈状态。每个状态随时存储Canvas上下文数据。下面是存储在状态堆栈的数据列表。 当前的坐标变换（变换矩阵）信息，比如旋转或平移时使用的rotate()和setTransform()方法 当前剪贴区域 图形上下文对象（CanvasRenderingContext2D）的当前属性值 CanvasRenderingContext2D…