2d上下文
var ctx = document.getElementById('cvs').getContext('2d')
绘制线条
ctx.beginPath()
ctx.moveTo(x, y) // 起点
ctx.lineTo(x, y) // 连线点
ctx.lineTo(x, y) // 连线点2
……
ctx.closePath()
添加样式
ctx.fillStyle = 'orangered'; // 填充颜色
ctx.fill(); // 填充
ctx.strokeStyle = 'beige' // 描边颜色
ctx.stroke(); // 描边
画线宽度 ctx.lineWidth = 2px;
矩形绘制
ctx.rect(x, y, w, h);
ctx.fillRect(x, y, w, h);
ctx.strokeRect(x, y, w, h);
圆形绘制
arc(x, y, r, startAngle, endAngle, true/false) // true/false 逆时针/顺时针
贝塞尔曲线
quadraticCurveTo(controlX, controlY, endX, endY) // 二次贝塞尔曲线
bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY) // 三次贝塞尔曲线
绘制文字
ctx.fillText(text, x, y, maxWidth); // 填充绘制
ctx.strokeText(text, x, y, maxWidth); // 描边绘制
-
other
安卓刷新下拉块的小圆,js实现思路
Screenshot_2019-02-11-17-40-12-02.png
利用cavans画圆,下拉距离与圆的圆周长度挂钩
- other2 图片相关
jpg有损压缩格式,靠损失图片的质量来减少图片的体积
gif, png有损压缩格式,靠损失图片的色彩数量减少图片的体积
ps源文件格式psd
fw源文件格式png
支持图片背景透明
gif, png8, png24, png32
支持图片本身透明
png24, png32
网友评论