千呼万唤 HTML 5 (10) - 画布（canvas）之转换

最新推荐文章于 2024-10-04 22:04:56 发布
最新推荐文章于 2024-10-04 22:04:56 发布
阅读量688 收藏
点赞数
分类专栏： HTML 文章标签： html button function 浏览器 c 360

原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/22/2362505.html

作者：webabcd



介绍
HTML 5: 画布（canvas）之转换（转换画布的用户坐标系）

  • 平移 | translate()
  • 旋转 | rotate()
  • 缩放 | scale()
  • 矩阵转换 | transform(a, b, c, d, e, f)
  • 矩阵转换 | setTransform(a, b, c, d, e, f)



示例
1、平移 | translate()
canvas/transform/translate.html

<!DOCTYPE HTML>
<html>
<head>
    <title>平移</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasX = 0;
        var canvasY = 0;

        var stepX = 20;
        var stepY = 20;

        function drawIt() {
            if (canvasX == 0 && canvasY == 0)
                ctx.strokeRect(0, 0, 100, 100);

            canvasX += stepX;
            canvasY += stepY;

            /*
             * context.translate(x, y) - 将当前的用户坐标系平移指定的距离
             *   x - x 轴方向上需要平移的像素数
             *   y - y 轴方向上需要平移的像素数
             */
            ctx.strokeStyle = "blue";
            ctx.translate(stepX, stepY);
            ctx.strokeRect(0, 0, 100, 100);
        }

        function clearIt() {
            ctx.translate(-canvasX, -canvasY);
            canvasX = 0;
            canvasY = 0;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>
复制代码


2、旋转 | rotate()
canvas/transform/rotate.html

<!DOCTYPE HTML>
<html>
<head>
    <title>旋转</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasRadian = 0;
        var stepRadian = 15 * Math.PI / 180;

        function drawIt() {
            if (canvasRadian == 0)
                ctx.strokeRect(360, 0, 20, 60);

            canvasRadian += stepRadian;

            /*
             * context.rotate(radian) - 将当前的用户坐标系旋转指定的弧度，顺时针为正值，逆时针为负值
             *   radian - 弧度值
             */
            ctx.strokeStyle = "blue";
            ctx.rotate(stepRadian);
            ctx.strokeRect(360, 0, 20, 60);
        }

        function clearIt() {
            ctx.rotate(-canvasRadian);
            canvasRadian = 0;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>
复制代码


3、缩放 | scale()
canvas/transform/scale.html

<!DOCTYPE HTML>
<html>
<head>
    <title>缩放</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasScaleX = 1;
        var canvasScaleY = 1;

        var stepScaleX = 1.1;
        var stepScaleY = 1.1;

        function drawIt() {
            if (canvasScaleX == 1 && canvasScaleY == 1)
                ctx.strokeRect(0, 0, 60, 60);

            canvasScaleX *= stepScaleX;
            canvasScaleY *= stepScaleY;

            /*
             * context.scale(x, y) - 将当前的用户坐标系缩放指定的倍数
             *   x - 水平方向上的缩放倍数
             *   y - 垂直方向上的缩放倍数
             */
            ctx.strokeStyle = "blue";
            ctx.scale(stepScaleX, stepScaleY);
            ctx.strokeRect(0, 0, 60, 60);
        }

        function clearIt() {
            ctx.scale(1 / canvasScaleX, 1 / canvasScaleY);
            canvasScaleX = 1;
            canvasScaleY = 1;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>
复制代码


4、矩阵转换 | transform(a, b, c, d, e, f)
canvas/transform/transform.html

<!DOCTYPE HTML>
<html>
<head>
    <title>矩阵转换 | transform(a, b, c, d, e, f)</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasScaleX = 1;
        var canvasScaleY = 1;

        var stepScaleX = 1.1;
        var stepScaleY = 1.1;

        function drawIt() {
            if (canvasScaleX == 1 && canvasScaleY == 1)
                ctx.strokeRect(0, 0, 60, 60);

            canvasScaleX *= stepScaleX;
            canvasScaleY *= stepScaleY;

            /*
             * context.transform(a, b, c, d, e, f) - 按指定的矩阵转换当前的用户坐标系
             *   相当于：context.transform(M11, M12, M21, M22, OffsetX, OffsetY)
             *
             * 关于仿射矩阵参考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html
             *
             *   |X|             |M11（默认值 1）      M21（默认值 0）       0|
             *   |Y| = |x y 1| * |M12（默认值 0）      M22（默认值 1）       0|
             *   |1|             |OffsetX（默认值 0）  OffsetY（默认值 0）   1|
             *
             *   X = x * M11 + y * M12 + OffsetX
             *   Y = x * M21 + y * M22 + OffsetY
             */
            ctx.strokeStyle = "blue";
            ctx.transform(stepScaleX, 0, 0, stepScaleY, 0, 0);
            ctx.strokeRect(0, 0, 60, 60);
        }

        function clearIt() {
            ctx.transform(1 / canvasScaleX, 0, 0, 1 / canvasScaleY, 0, 0);
            canvasScaleX = 1;
            canvasScaleY = 1;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>
复制代码


5、矩阵转换 | setTransform(a, b, c, d, e, f)
canvas/transform/setTransform.html

<!DOCTYPE HTML>
<html>
<head>
    <title>矩阵转换 | setTransform(a, b, c, d, e, f)</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {
            ctx.strokeStyle = "red";
            ctx.scale(2, 2);
            ctx.strokeRect(0, 0, 60, 60);

            /*
             * context.setTransform(a, b, c, d, e, f) - 首先重置用户坐标系，然后再按指定的矩阵转换用户坐标系（translate, rotate, scale, transform 是针对当前用户坐标系做转换，而 setTransform 是针对重置后的用户坐标系做转换）
             *   相当于：context.setTransform(M11, M12, M21, M22, OffsetX, OffsetY)
             *
             * 关于仿射矩阵参考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html
             *
             *   |X|             |M11（默认值 1）      M21（默认值 0）       0|
             *   |Y| = |x y 1| * |M12（默认值 0）      M22（默认值 1）       0|
             *   |1|             |OffsetX（默认值 0）  OffsetY（默认值 0）   1|
             *
             *   X = x * M11 + y * M12 + OffsetX
             *   Y = x * M21 + y * M22 + OffsetY
             */
            ctx.strokeStyle = "blue";
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.strokeRect(0, 0, 60, 60);
        }

        function clearIt() {
            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>
复制代码



OK
[源码下载]


scoliver
关注
专栏目录
canvas画布的转换
qq_44899153的博客
06-27 235
平移 移动画布的原点 translate(x,y) 参数表示移动目标点的坐标 //位移 ctx.beginPath() ctx.translate(100, 100);//位移的是画布的基点 缩放 scale(x,y) 参数表示宽高的缩放比例 //缩放 ctx.scale(2, 2); ctx.strokeRect(-50, -50, 50, ...
canvas内容移动与交互
球球不吃虾WHR2349博客
10-09 1043
canvas里的内容绘制上去之后，无法直接进行控制。 创建一个用来维护canvas中内容的对象 canvas每次绘制都是从可维护的内容对象中取值，进行绘制的。 class Circle { constructor(id, x, y, r) { this.id = id this.x = x this.y = y this.r = r ..
画布和图片互相转换，使用画布canvas通过ajax、表单等方式将图片上传到服务器，拿来就用，拿来测试
mengzhanfei1的博客
01-04 578
画布和图片互相转换，使用画布canvas通过ajax、表单等方式将图片上传到服务器，拿来就用，拿来测试
pltjs:一种编程语言设计原型工具
07-02
plt.js 一种编程语言设计原型工具 概述 plt.js 是一个用于编写和测试编程语言语法的环境。 您以 HTMLish 语法编写语言的语法和示例代码，plt.js 将根据您的语法解析您的代码并显示结果。 它还将为您提供一个接口到您的语言中，因此您可以立即感受它。 它看起来像这样： < grammar> start = '(' '+' space a:number ' ' b:number space ')' { return a + b } number = d:digit+ { return parseInt( d.join('') ) } digit = [0123456789] space = ' '* </ grammar> < h3> Addition </ h3> < code> (+ 5 10
将html内容转为canvas内容的实现方法 将html转为图片的方法 html2canvas.js的使用
热门推荐
角角兔的博客
07-31 2万+
介绍 因为要做记录将html的内容转成canvas并且作为图片显示。 其实是因为要做一个H5页面，类似于小测试，最后的测试结果是以图片输出的（其实canvas也能直接长按保存）。在网上找到了一个js库可以把html的元素转为canvas，特此记录以免自己忘记了 html转为canvas的库： html2canvas.js官网 意思就是 html to canvas (html 转 can...
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(2月27日-3月4日)
Kevin Fan
03-07 1585
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(2月27日-3月4日) 本周Silverlight学习资源更新 Silverlight实用窍门系列：57.Silverlight中的Binding使用（二）-数据验证 程兴亮 企业内部使用Silverlight5浏览器内受信任的应用程序 slmk Silverl
自定义view - 收藏集 - 掘金
weixin_34233618的博客
07-04 875
Android 从 0 开始自定义控件之 View 的 draw 过程 （九） - Android - 掘金转载请标明出处： http://blog.csdn.net/airsaid/... 本文出自：周游的博客 ... Andriod 从 0 开始自定义控件之 View 的 layout 过程 （八） - Android - 掘金转载请...
JavaScript-Canvas-to-Blob:JavaScript Canvas to Blob是将画布元素转换为Blob对象的功能
04-13
这会将JavaScript文件相对于当前目录安装在./node_modules/blueimp-canvas-to-blob/js/ ，您可以从中将它们复制到Web服务器提供的文件夹中。 接下来，在HTML标记中包含缩小JavaScript Canvas to Blob脚本： < ...
canvas2svg：将HTML5 Canvas绘制命令转换为SVG
02-04
该库使用JavaScript将Canvas转换为SVG。 换句话说，该库使您可以使用canvas api构建SVG文档。 为什么要使用它？ 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件格式转换为SVG...
利用HTML5的画布Canvas实现刮刮卡效果
09-03
大家都玩过刮刮乐吧，都想一夜暴富，本文给大家分享一款利用HTML5的画布Canvas实现刮刮卡效果，需要的朋友可以参考下
html-canvas-img-resizer:用于具有HTML5画布的浏览器的图像大小调整器
05-06
html-canvas-img-resizer 用于具有HTML5画布的浏览器的图像大小调整器，它不使用外部库，仅使用HTML5 Canvas裁剪图像并输出base64图像数据 注意：如果未提供div的高度，则画布的宽度和高度由所提供的div的id确定，...
HTML5福利篇--使用Canvas画图
小马哥的博客
09-22 2714
浏览器不支持
在MID使用Gnome Canvas实现连续的仿射变换的问题
shallon 的笔记
09-16 794
续上文： http://blog.csdn.net/shallon_luo/archive/2009/09/16/4557785.aspx （1）占用的CPU/内存资源太多。经过测试，比起用GTK+GDK绘图的简单实现来说要耗费更多的CPU和内存资源。 （2）屏幕上的图像上的每个点经过连续的仿射变换来完成连续的图像效果，由于仿射变换是浮点运算，坐标（x,y）经过连续的浮点运
HTML5 2D Canvas手机游戏开发经验谈
探路者
02-06 2249
临渊羡鱼，不如退而结网—HTML5 2DCanvas手机游戏开发经验谈 现在什么技术最火？HTML5！现在什么技术最时尚！还是HTML5！也许有泡沫和炒作的成分，但是不得不承认，这个世界上本就没有所谓的公平。多年来兢兢业业带给我们无数快乐痛苦和就业机会的Flash，在代表着众多巨头利益，从蹒跚学步起就被内定为太子的HTML5面前，也许注定就是为他人做嫁衣的命。 当你在网上看到铺
【HTML并不简单】笔记1-常用rel总结：nofollow、noopener、opener、noreferrer，relList
karshey的博客
09-30 840
在移动端开发中，页面左上角往往会有一个“返回”按钮，但如果用户是通过点击某个分享链接进入的，那么这个返回的逻辑就不对，因为并没有上一页，此时这个“返回”按钮显示为“主页”按钮更合适。在某列表页面，点击任意列表会进入详情页，然后希望再次返回（通过页面内链接，而非浏览器的“后退”按钮）到列表页的时候，页面依然定位在之前的滚动位置，但如果是从其他页面进入的，则滚动置顶。SEO中有个策略，如果一个权重很高的网站，直接外链一个权重不高的中小网站，同时没有设置rel=“nofollow”，那么这个中小网站的权重。
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1087
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 1027
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
【移动端】Viewport 视口
最新发布
小秀的博客
10-04 1223
（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值