• 当前标签:canvas

使用canvas压缩图片大小

目前的项目都有需要用到前端上传图片做压缩处理,结合canvas的toDataURL可以即可做简单的处理,输出格式为base64,下边做了一个简单的封装 /** * [imageCompress 图片压缩] * @param {[Array]} imgSrc [传入图片地址] * @param {Number} [width=1024] [图片需要压缩的宽度,单位:px] * @param {Number} [quality=1] [图片需要压缩的质量,0~1之间] * @return {[type]} [返回base64 jpeg格式图片] */ export function imageCo

2019-04-03 21:35:48 175 0 5
阅读详情

凑个数,canvas绘制时钟

许久不更新了一样,用以前学习作业凑个数,canvas绘制的时钟,效果图: js代码 var canvas = document.getElementById('canvas'); var can = canvas.getContext('2d'); clock(); setInterval(clock,1000); function clock(){ can.clearRect(0,0,canvas.width,canvas.height); // 获取时间 var nowTime = new Date(); var H = nowTime.getHours(); var M = nowTim

2016-11-16 22:05:56 2804 5 37
阅读详情

canvas简易画板

路径移动部分代码: canvas.onmousedown = function(ev){ ev = ev || window.event; _x = ev.clientX , _y = ev.clientY; // 路径开始 cxt.beginPath(); cxt.moveTo(_x - canvas.offsetLeft , _y - canvas.offsetTop); this.onmousemove = function(ev){ ev = ev || window.event; x = ev.clientX , y = ev.clientY; // 路径移动 cxt.lineTo(

2016-10-24 22:31:51 3438 12 22
阅读详情

JavaScript面向对象封装canvas环形进度条

canvas制作环形进度条需要注意的地方,就是关于角度与百分比的转换,公式如下: 传参利用的是json键值对方式进行传递参数,总共支持7个参数, obj:canvas对象(必填参数) radius:圆形的半径(必填参数) progress:进度条参数(必填参数) color:3个参数,第一个是canvas底层圆形的颜色,第二个参数为进度条环形颜色,第三个参数为中间文字颜色(必填参数) value:需要显示的字符串(选填参数,默认为没有文字只要百分比显示) fontSize:文字的大小(选填参数,默认为20px) lineWidth:canvas进度条线宽(选填参数,默认为10) 具体js代码如

2016-10-06 14:02:55 2670 2 22
阅读详情
  • 1
前往