html canvas drawrect 变形,canvas图形变换

这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动，旋转，缩放等变形方法，还会介绍如何在canvas中加载图像。

状态的保存和恢复

为了在变形之后，能够将图形恢复原样，需要保存图形的原有状态：

save() restore保存和恢复canvas状态，都没有参数。

可以调用任意多次save方法

每一次调用restore方法，上一个保存的状态就从栈中弹出，所有设定都恢复

Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：

当前应用的变形(即移动，旋转和缩放等)

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation的值

当前的裁切路径(clipping path)

一个简单的示例如下：

效果如下所示：

变形

图形的变形包括移动，旋转和缩放等，所有这些变形是针对canvas坐标空间的变形，所以在变形之前最好先保存状态，这样便于使用restore恢复现场。

移动 Translating

translate(x, y)

该方法用来移动 canvas 和它的原点到一个不同的位置，接受两个参数。x 是左右偏移量，y 是上下偏移量，如下图所示。

旋转 Rotating

rotate(angle)

该方法用于以原点为中心旋转 canvas，接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

缩放 Scaling

scale(x, y)

该方法用来对形状，位图进行缩小或者放大，接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

变形 Transforms

transform(m11, m12, m21, m22, dx, dy)

该方法允许对变形矩阵直接修改，将当前的变形矩阵乘上一个基于自身参数的矩阵，在这里我们用下面的矩阵表示：

\\begin{bmatrix}m11&m21&dx\\\\m12&m22&dy\\\\0&0&1\\end{bmatrix}

各参数含义如下：

m11 水平方向的缩放

m12 水平方向的倾斜

m21 竖直方向的倾斜

m22 竖直方向的缩放

dx 水平方向的移动

dy 竖直方向的移动

另外还有两个变形方法：

resetTransform() 重置当前变形为单位矩阵

setTransform(m11, m12, m21, m22, dx, dy) 将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法

下面是变形的例子：

效果如下所示：

html canvas drawrect 变形,canvas图形变换相关推荐

canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)
这里首先演示下位移,这里使用的函数是translate(x, y)这个函数是叠加的,也就是说,当translate(100, 100),后再次调用translate(200, 200),那么最后圆点的 ...
使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C "工作草案" - 意味着它仍然处于开发阶段 - 它包含丰富的元素和属性,它 ...
canvas笔记-canvas中用户与图形交互
运行截图如下: 点击某个圆后: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...
Html5学习------canvas绘制径向渐变图形
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content=& ...
HTML5教程实例-用Canvas制作线性渐变图形
HTML5教程实例-用Canvas制作线性渐变图形到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下& ...
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
1 Canvas 简介 Canvas 表示画布,现实生活中的画布是用来作画的. HTML5 中的 Canvas :我们可以称它为"网页中的画布".默认情况下,Canvas 是一块 ...
HTML5教程实例-用Canvas制作径向渐变图形
HTML5教程实例-用Canvas制作径向渐变图形上节课,我们学习了如何使用Canvas绘制线性渐变图形,今天我们来学习一下如何绘制径向渐变图形.通过上节课的学习,我们知道绘制线性渐变图形用到了一个 ...
android canvas drawrect画图,为什么在android中调用canvas.drawRect时只绘制一个矩形？
我正在尝试使用foreach循环为ArrayList中的每个字符串绘制一个矩形,但它似乎只绘制了最后一个矩形. 我看过类似的问题,但他们遇到的问题包括矩形底部高于顶部并调用drawPaint - 但我 ...
Android Canvas.drawRect绘制矩形
Android30 canvas.drawRect方法 public void drawRect(float left, float top, float right, float bottom, @ ...
html5实现圆圈里带一个三角形,HTML5 Canvas圆圈里面的三角形变换动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas, ctx, cw, ch; var particles = [], grid = [] ...

html canvas drawrect 变形,canvas图形变换

html canvas drawrect 变形,canvas图形变换相关推荐

最新文章

热门文章