HTML5 Canvas API 变换(translate函数)

下面我们来看下在canvas上绘制图像的另一种方式——变换(translate函数的应用）：

下面的代码：我们还是实现上篇文章的效果：画一条斜线。理论上的知识，自己买书去看吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>转换</title><style type="text/css">#diagonal{border: 1px solid red;width: 200px;height: 200px;}</style><script type="text/javascript">function drawDiagonal() {//取得canvas元素及其绘图上下文var canvas = document.getElementById("diagonal");var context = canvas.getContext("2d");//保存当前绘画状态，以便我们画完这副画以后，再恢复到这个状态，画另一副画。            context.save();//向右下方移动绘图上下文            context.translate(70, 140);//以原点为起点，绘制与前面相同的线段            context.beginPath();context.moveTo(0, 0);context.lineTo(70, -70);//将这条线绘制到canvas画布上去。
            context.stroke();//恢复原有的绘图状态            context.restore();//可以开始另外一副绘图。。。。。。        }window.addEventListener("load", drawDiagonal, true);</script>
</head>
<body>
<canvas id="diagonal"></canvas>
</body>
</html>

（请注意加红色背景的字）
1、首先通过ID找到并访问canvas对象。

2、接着通过调用canvas对象的getContext函数获取上下文对象。

3、接下来，保存尚未修改的context对象，这样我们即使通过moveTo、lineTo、translate等操作后，我们还是可以恢复到这个状态，然后开始绘画另一个副图，或者另外一些操作。

4、下一步是在context中调用translate函数。通过这个操作，当进行平移行为(moveTo)发生时，我们的提供的变换坐标｛translate(70,140)｝会被加到结果坐标｛moveTo(0,0)｝上去，结果移动到了坐标点(70,140){即横向：70，纵向：140}(我们暂时称坐标A吧)上面了。

5、上一步完成后，我们调用lineTo(70，-70)，意思是在上一个坐标点(70,140)上横向加70(70+70=140)，纵向减70(140-70=70)，于是我们得一点(140，70)(我们暂时称为坐标B吧),得到两个坐标点后，lineTo方法告诉我们用一条直线把A、B这两个坐标点连起来。

其它上篇已介绍过，就不多说了。如果觉得我理解错了，希望你能帮我指出来。在这里我还要向 artwl 表示感谢，他对我上某篇文章写的不好处的赐教。真心希望大家能赐教。。。。

转载于:https://www.cnblogs.com/koeltp/archive/2012/09/29/2707913.html

HTML5 Canvas API 变换(translate函数)相关推荐

java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
应用html5画布Apicss制作,程序设计HTML5 Canvas API
复制代码代码如下: try { document.createElement("Canvas").getContext("2d"); document.get ...
html5 Canvas API
2.1 Canvas 概述 Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小.此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间. ...
用html做个猜字游戏,HTML5 Canvas API制作简单的猜字游戏
这篇文章主要介绍了借助HTML5 Canvas API制作一个简单的猜字游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下二话不说,先上效果图以及源代 ...
html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
html5显示字母的值,使用HTML5 Canvas API控制字体的显示与渲染的方法
今天我们开始征战一个全新的内容--HTML5 Canvas的文本API!要知道,艺术家通常同时也是一个书法家,所以我们要学习写字,而且是写出漂亮的字.是不是很有意思? 好了,先预告一下Canvas 文 ...
html5 canvas api w3c官方中文,HTML5 Canvas 简介
一.使用 Canvas 绘制路径 moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标使用 stroke() 方法来绘制线条通过指定从何处开始,在何处结束,来绘制一条 ...
clear html5代码,用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
在现实世界中,我们使用画笔在画板上进行绘画:在html5 canvas中,我们同样可以使用canvas的画笔--CanvasRenderingContext2D对象在canvas上进行绘画.众所周知, ...
html如何中心缩放图片,详解如何用HTML5 Canvas API控制图片的缩放变换
缩放变换scale(sx,sy)传入两个参数,分别是水平方向和垂直方向上对象的缩放倍数.例如context.scale(2,2)就是对图像放大两倍.其实,看上去简单,实际用起来还是有一些问题的.我们来 ...

HTML5 Canvas API 变换(translate函数)

HTML5 Canvas API 变换(translate函数)相关推荐

最新文章

热门文章