• 当前标签:canvas

实战案例 使用canvas压缩图片大小

目前的项目都有需要用到前端上传图片做压缩处理,结合canvas的toDataURL可以即可做简单的处理,输出格式为base64,下边做了一个简单的封装 /** * [imageCompress 图片压缩] * @param {[Array]} imgSrc [传入图片地址] * @param {Number} [wid

2019-04-03 21:35:48 1367 10 22
阅读详情

实战案例 凑个数,canvas绘制时钟

许久不更新了一样,用以前学习作业凑个数,canvas绘制的时钟,效果图: js代码 var canvas = document.getElementById('canvas'); var can = canvas.getContext('2d'); clock(); setInterval(clock,1000); f

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

实战案例 canvas简易画板

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

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

实战案例 JavaScript面向对象封装canvas环形进度条

canvas制作环形进度条需要注意的地方,就是关于角度与百分比的转换,公式如下: 传参利用的是json键值对方式进行传递参数,总共支持7个参数, obj:canvas对象(必填参数) radius:圆形的半径(必填参数) progress:进度条参数(必填参数) color:3个参数,第一个是canvas底层圆形的颜色

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