![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas
samfung09
这个作者很懒,什么都没留下…
展开
-
随手画个饼状图及时钟
今天复习canvas,随手画了个饼状图及时钟。首先注意canvas中画圆用的是弧度而不是角度,但一般情况下角度对我们来说更直观,所以需要将角度转成弧度,很简单,一个圆角度为360,而弧度为2π,写个函数转换一下就行。//角度转弧度,angle to radianfunction a2r(angle){ return angle*Math.PI/180;}然后还有个注意事项...原创 2018-07-30 20:22:32 · 1150 阅读 · 0 评论 -
canvas做动图以及配合video标签操作视频
动图canvas的drawImage()方法很强大,第一个参数可以是图片,可以是canvas,还可以是video。做动图主要是用到它的裁剪效果,也就是传参的不同,裁剪效果有9个参数,drawImage(原图,从原图哪里开始裁剪x坐标,y坐标,裁剪宽度,裁剪高度,从画布哪里开始画x坐标,y坐标,缩放宽度(对比裁剪宽高),缩放高度)实现代码var canvas = document.ge...原创 2018-08-02 20:24:47 · 2484 阅读 · 0 评论 -
canvas压缩图片上传
图片预览使用html5中FileReader读取文件base64信息var input = document.querySelector('input');var preview = document.querySelector('.preview');input.onchange = function(){ var file = input.files[0]; /...原创 2018-05-12 00:54:54 · 195 阅读 · 0 评论 -
canvas
我发现看自己的博客比查文档还快,所以就在这里写一下 canvas 基础的API。以及我自己封装的画笔,github地址基础API画线var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.moveTo(20, 20); //画笔移动到这个坐标开始画ctx.l...原创 2019-01-08 23:28:55 · 182 阅读 · 0 评论