canvas旋转
canvas旋转画笔，可以使用rotate方法，rotate方法是绕着中心点旋转的，中心点默认是左上角的(0,0)位置，可以使用translate方法改变旋转的中心点，下面介绍两种方法旋转，可以根据自己的需求使用，关键是理解旋转的原理
旋转方法1
此种方法是，先将中心点平移到矩形中心，接着旋转，再将中心点平移回原点(0, 0)，按照之前的位置和大小绘制即为绕中心旋转后的图形，此种方法，在还原之前，绘制的东西都会绕着调用rotate的位置旋转
<html>
<head>
<meta charset="utf-8" />
<title>canvas绕中心旋转</title>
<style>
canvas {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="800"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let width = canvas.width;
let height = canvas.height;
// 矩形的参数
const x = 100;
const y = 100;
const rectWidth = 400;
const rectHeight = 200;
// 绘制旋转前的矩形
var grd = ctx.createLinearGradient(100, 100, 500, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.fillRect(x, y, rectWidth, rectHeight);
// 计算出矩形中心点的位置
let tx = x + rectWidth / 2;
let ty = y + rectHeight / 2;
// 先平移到中心点
ctx.translate(tx, ty);
// 旋转90度
ctx.rotate(Math.PI / 2);
// // 渐变的位置也要改
// var grd = ctx.createLinearGradient(-rectWidth / 2, -rectHeight / 2, rectWidth / 2, rectHeight / 2);
// grd.addColorStop(0, "red");
// grd.addColorStop(1, "blue");
// ctx.fillStyle = grd;
// // 绘制旋转后的矩形，要注意，此时中心点为矩形中心，所以左上角坐标要重新计算，不是之前的x和y
// ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
// // 重新旋转
// ctx.rotate(-Math.PI / 2);
// 再平移回原点
ctx.translate(-tx, -ty);
// 绘制旋转后的图形
ctx.fillRect(x, y, rectWidth, rectHeight);
// 重新还原旋转的角度，避免下次绘制出现问题
ctx.translate(tx, ty);
ctx.rotate(-Math.PI / 2);
ctx.translate(-tx, -ty);
</script>
</body>
</html>旋转方法2
此种方法是，先将中心点平移到矩形中心，接着旋转，绘制，再还原回原来的状态，此种方法是在绘制好之后再还原，但是绘制的位置和距离等都需要重新计算
<html>
<head>
<meta charset="utf-8" />
<title>canvas绕中心旋转</title>
<style>
canvas {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="800"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let width = canvas.width;
let height = canvas.height;
// 矩形的参数
const x = 100;
const y = 100;
const rectWidth = 400;
const rectHeight = 200;
// 绘制旋转前的矩形
var grd = ctx.createLinearGradient(100, 100, 500, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.fillRect(x, y, rectWidth, rectHeight);
// 计算出矩形中心点的位置
let tx = x + rectWidth / 2;
let ty = y + rectHeight / 2;
// 先平移到中心点
ctx.translate(tx, ty);
// 旋转90度
ctx.rotate(Math.PI / 2);
// 渐变的位置要改
var grd = ctx.createLinearGradient(-rectWidth / 2, -rectHeight / 2, rectWidth / 2, rectHeight / 2);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
// 绘制旋转后的矩形，要注意，此时中心点为矩形中心，所以左上角坐标要重新计算，不是之前的x和y
ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
// 重新旋转
ctx.rotate(-Math.PI / 2);
// 再平移回原点
ctx.translate(-tx, -ty);
</script>
</body>
</html>HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas 定义一个区域，可以由html属性定义该区域的宽高，javascript代码可以访问该区域，通过一整套完整的绘图功能（API）,在网页上渲染动态效果图。
web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪
上传截图很多做法是把图像发送到后端，把裁剪后的结果发送给浏览器，这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切：这里头关键有三步：显示未经处理的图片，得到裁剪区域，显示裁剪后的区域。
原生js使用canvas实现图片格式webp/png/jpeg在线转换
javascript完成图片格式转换： 通过input上传图片，使用FileReader将文件读取到内存中。将图片转换为canvas，canvas.toDataURL()方法设置为我们需要的格式，最后将canvas转换为图片。
离屏Canvas — 使用Web Worker提高你的Canvas运行速度
现在因为有了离屏Canvas，你可以不用在你的主线程中绘制图像了！Canvas 是一个非常受欢迎的表现方式，同时也是WebGL的入口。它能绘制图形，图片，展示动画，甚至是处理视频内容
canvas高效绘制10万图形,你必须知道的高效绘制技巧
最近的一个客户项目中，简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难，上手就可以做,写两个for循环。，IT行业的知识更新越来越快，能够以不变应万变的人，就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中，屹立不倒，不被淹没。
利用canvas将网页元素生成图片并保存在本地
利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似
基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块
随着大数据时代的来临，物联网的日益发展，原先的 SCADA 系统本身也在求新求变，从最开始的专业计算机和操作系统，到通用计算机和相关软件，再到现在基于 HTML5 Canvas 的新型组态开发，其应用的范围也从最初的电力
js用canvas实现简单的粒子运动
在写下合格粒子运动时要先清楚你的思路，不能一开始就盲目的开始写，首先先要确定思路然后在去一步步的实现，在写的过程要注意细节，要思考js有些知识是跟数学知识相关的要注意观察
Canvas 点线动画案例
canvas 画的圆不是圆，是椭圆。不要在style里指定 Canvas 的宽度，Canvas 画布的尺寸的大小和显示的大小是有很大的区别的，在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径
Canvas在移动端绘制模糊的原因与解决办法
由于一些移动端的兼容性原因，我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决，我们采用了pdf.js这个插件，该插件可以将pdf转换成canvas绘制在页面上
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!