JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态，主要是靠人眼的视觉残留效应。视觉残留也叫视觉暂留现象，物体在快速运动时, 当人眼所看到的影像消失后，人眼仍能继续保留其影像0.1~0.4秒左右的图像，这种现象被称为视觉暂留现象。利用人的这种视觉生理特性可制作出具有高度想象力和表现...
- 博客
- canvas中的drawImage一、在canvas画布中如何加载图片 ---用drawImage( )方法 drawImage用法的三种情况： 1、在画布指定位置定义图像 ctx.drawImage(img,x,y); 注：此时画布上显示的图片大小是图片的默认大小 2、在画布上定位图像，并规定图像的宽度和高度： ctx.d...博客
- JavaScript图形实例之Canvas API1．Canvas概述 Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 要使用HTML5在浏览器窗口中绘制图形，首先需要在HTML文档中新建一个canvas网页元素。一般方法如...博客
- 图形处理：给 Canvas 文本填充线性渐变作者：凹凸曼 - Barrior 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现，而带角度的渐变就复杂很多；就好像下面这样，假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。 猜想与答案 给出两个答案： 正确答案是图二，因为这样得出来的坐标生成的渐变最紧接文本矩形边界...博客
- Canvas 基础一一、绘制一条直线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> canvas{ border: 1px solid...博客
- Canvas 画折线图一、画折线图需要有如下准备如下： 1、绘制网格 2、绘制坐标系 3、绘制点 4、点连线就成了折线图 二、绘制网格 1、确认网格（每个格子）的大小 2、确认X轴方向有多少条横线 3、确认Y轴方向有多少条竖线 4、遍历画出来 <!DOCTYPE html> <h...博客
- Canvas 基础二一、绘制矩形 1、rect (x, y, width, height) : 绘制矩形的路径 ---用轨迹画的，不是独立路径( 没有beginPath() ) ---需要stroke()描边才会显示 2、strokeRect (x, y, width, heigh...博客
- 谈谈图片上传及canvas压缩的流程我们通常在做图片上传的时候都会遇上这样的情况，一是后端接口限制上传图片的大小，或者是即使后端没有限制大小，因为图片太大在前端渲染时太慢，造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。 本文在gitthub做了收录：github.com/Michael-lzg… 本文主要包括以下流...博客
- 小程序canvas绘制海报2020年第一篇文章，年初忙着复习刷题一直没空去写东西，书看的越多感觉越技不如人，始终徘徊在小菜鸡的行列中，最近项目里正好有一个canvas的业务，突然又燃起了我一个UI前端的火种，记下了踩坑和思考**。 踩坑** 问题1:为什么在canvas上画图片模糊？ 在canvas上绘制图片/文字的时...博客
- 有趣的Canvas，你值得拥有！Canvas 是 HTML5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 HTML 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。 canvas 的使用领域 游戏 大数据可视化数据 banner 广告 多媒体 模拟仿...博客
