![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas
前端小峰
本人热爱编程,以前端为端口完善自己的技术栈,一起成长,一起见证。
展开
-
把canvas导出为图像
<!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" content="chrome=IE8"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Canvas Clip Demo</title></head>&l原创 2021-03-21 19:32:52 · 609 阅读 · 0 评论 -
Canvas简述---动画帧(3/3)
说到动画帧,很容易理解,做过PS应该指导动画帧就是动画的最小单位长度,其实我们看到的视频和动画都是通过某个形状的东西经过移动变换形成的,因为移动很快,所以我们大脑就形成一个连续的回路,这就是动画。第一步:我们呢在网上找到动画帧的图片第二部:开始绘制var canvas = document.getElementById('canvasElem'); canvas.style.border = '1px solid red' var ctx = canvas.getCo.原创 2020-06-03 10:56:50 · 242 阅读 · 0 评论 -
Canvas简述---绘图篇(2/3)
我们这个简述,弄在一起感觉太长了,我就拆开用三部分去聊,主要是有代码,看起来比较长,不是很爽,不介意把,哈哈哈1、绘制矩形var canvas = document.getElementById('canvasElem'); canvas.style.border = '1px solid red' var ctx = canvas.getContext('2d') // 绘制矩形用到rect rect(x,y,w,h) 分别表示起始横纵坐标 宽度 长度 .原创 2020-06-03 10:46:39 · 260 阅读 · 0 评论 -
Canvas简述---入门理解(1/3)
来,我们今天聊聊canvas,说到这个canvas,大家是不是感觉都不是很陌生呢,我写的这篇主要是针对入入门选手的朦胧篇。老规矩,我们先了解canvas是个啥玩楞(刚学的)1、什么是canvas?canvas通过字面意思是画布的意思,没错就是画布,是HTML5提出的一个方面绘画的工具标签(顿时让我想到一句话:给你一张画板,你想画什么?我反正想画一个长发美女,hhhh)canvas是一个矩形区域,可以支持各中形状,图片,动画的绘制,目前只支持2d绘制,后面会提出3d(估计不错)2、如何入门canva.原创 2020-06-03 10:22:05 · 596 阅读 · 0 评论