<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">

        The current browser does not support Canvas, can replace the browser a try!

    </canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas');

            canvas.width = 1024;

            canvas.height = 768;

            if(canvas.getContext('2d')){

                var context = canvas.getContext('2d');

                context.lineWidth = 5;

                context.save();

                    context.scale(1,1);

                    context.strokeRect(50,50,200,200);

                context.restore();

                context.save();

                    context.scale(2,2);

                    context.strokeRect(50,50,200,200);

                context.restore();

                context.save();

                    context.scale(3,3);

                    context.strokeRect(50,50,200,200);

                context.restore();

            }else{

                alert('当前游览器不支持Canvas，请更换游览器后再试！');

            }

        }

    </script>

</body>

<script>

    /*图形变换

        位移 translate(x,y)

        旋转 rotate(deg)

        缩放 scale(sx,sy) :

            原点、边框、大小 都scale了

    变换矩阵 trasform

        a c e

        b d f

        0 0 1

        a 水平缩放（1）

        b 水平倾斜（0）

        c 垂直倾斜（0）

        d 垂直缩放（1）

        e 水平位移（0）

        f 垂直位移（0）

    */

</script>

</html>

canvas-0scale.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. 发现一个好玩的东西 Web Scraper

    是一个 Chrome 的扩展程序,机智的小爬虫

  2. 【安全狗SRC】抗D设备哪家强？你来！大佬告诉你答案

    上周,安全狗SRC联合SRC部落,携手推出了爆款话题:传统抗D设备 vs 新兴CDN抗D:抗D效果哪个好? 一经发布简直好评如潮,热评无数,四方雷动(?)原帖在此,错过的吃瓜表哥们可以再围观一下~ht ...

  3. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 8.仪表盘 Dashboard(horizon)安装配置

    仪表盘Dashboard(horizon)是一个web接口,使得云平台管理员以及用户可以管理不同的Openstack资源以及服务.这个部署示例使用的是 Apache Web 服务器. 节点配置信息说明 ...

  4. Java中的引用传递和值传递

    Java中的引用传递和值传递 关于Java的引用传递和值传递,在听了老师讲解后,还是没有弄清楚是怎么一回事,于是查了资料,所以在这里与大家分享,有不对的地方,欢迎大家留言. java中是没有指针的,j ...

  5. HTML编辑器 -- KindEditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

  6. Xamarin.Android 使用 SQLite 出现 Couldn't read row 0, col -1 from CursorWindow. 异常

    异常:Java.Lang.IllegalStateException: Couldn't read row 0, col -1 from CursorWindow.  Make sure the Cu ...

  7. Django--Auth 模块

    1 Auth模块是什么 Auth模块是Django自带的用户认证模块: 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码 ...

  8. Rsync文件同步工具

    前段时间因公司需求,需要把备份的文件进行同步保存,后面就想到了我们大家都最熟悉的文件同步工作Rsync,于是就捣鼓了一下午时间,然后总结了下大概过程和参数详情. 首先了解了下rsync同步的大致原理: ...

  9. TCP/IP 笔记 - 传输控制协议

    与UDP不同,TCP提供面向连接的.可靠的.基于字节流的传输层协议,且提供差错纠正. TCP传输的概念 对与分组丢失和比特差错的处理方法,最直接的方法是重发分组,直到它被正确接收. 这需要一种方法来判 ...

  10. Spring Cloud简介

    一.本文介绍 Web应用由最早的单体应用发展成为集群式的部署,再到现在的分布式系统.尤其是这两年分布式相关的技术发展的很快,一方面是以Dubbo为代表的,另一方面则是以Spring Cloud系列为代 ...