转换方法

scale(scalewidth,scaleheight)                缩放当前绘图至更大或更小

scalewidth         缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)

scaleheight         缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

rotate(angle)                旋转当前绘图

angle         旋转角度，以弧度计。

如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

translate(x,y)                重新映射画布上的 (0,0) 位置

x         添加到水平坐标(x)上的值

y         添加到垂直坐标(y)上的值

transform(a,b,c,d,e,f)        替换绘图的当前转换矩阵

a         水平缩放绘图

b         水平倾斜绘图

c         垂直倾斜绘图

d         垂直缩放绘图

e         水平移动绘图

f         垂直移动绘图

setTransform(a,b,c,d,e,f)        将当前转换重置为单位矩阵。然后运行 transform()

a         水平旋转绘图

b         水平倾斜绘图

c         垂直倾斜绘图

d         垂直缩放绘图

e         水平移动绘图

f         垂直移动绘图

var a=document.getElementById("f");

var ctx=a.getContext("2d");

ctx.strokeRect(20,20,30,30);

ctx.scale(2,2); //缩放当前绘图至更大或更小

ctx.strokeRect(20,20,30,30);

ctx.fillRect(120,20,30,20);

ctx.translate(30,30); //重新映射画布上的 (0,0) 位置

ctx.fillRect(120,20,30,20);

//缩放当前绘图至更大或更小

ctx.rotate(25*Math.PI/180);

ctx.fillRect(50,50,100,10);

ctx.fillStyle="green";

ctx.fillRect(20,50,10,20);

ctx.transform(2,0.5,-0.5,2,50,0);//替换绘图的当前转换矩阵

ctx.fillStyle="red";

ctx.fillRect(20,50,10,20);

ctx.fillStyle="yellow";

ctx.fillRect(0,0,50,20)

ctx.setTransform(1,0.5,-0.5,1,30,10);//将当前转换重置为单位矩阵。然后运行 transform()

ctx.fillStyle="red";

ctx.fillRect(0,0,50,20);

ctx.setTransform(1,0.5,-0.5,1,30,10);

ctx.fillStyle="blue";

ctx.fillRect(0,0,50,20);

HTML5 Canvas中实现绘制一个像素宽的细线

正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

html5 canvas中CanvasGradient对象用法

html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变 CanvasGradient对象可以实现两种不同形式的 ...

HTML5 canvas中的路径方法

路径方法 fill()                                填充当前绘图(路径) stroke()                        绘制已定义的路径 begin ...

HTML5 canvas 中的线条样式

线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

HTML5 Canvas 中的颜色、样式和阴影的属性和方法

颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

HTML5 Canvas中9宫格的坑

近期小鸟情人游戏上了手机qq空间,一个3岁的游戏来了她的第二春.为了能有更好的表现,我们对其进行了一次改版. 改版当中一项就是对原来的弹出框样式进行改进.将大块木板材质改成纯色(边框为圆角金属材质)样 ...

HTML5 Canvas中绘制椭圆的几种方法

1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...

Html5 Canvas Text

html5 canvas中支持对text文本进行渲染;直接的理解就是把text绘制在画布上,并像图形一样处理它(可以加shadow.gradient.pattern.color fill等等):既然它 ...

HTML5 Canvas渐进填充与透明

详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使 用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canv ...

随机推荐

使用BroadcastReceiver实现系统对手机电量进行提示

import android.content.BroadcastReceiver;import android.content.Context;import android.content.Inten ...

新浪微博数据抓取(java实现)

多了不说,直接贴出相关部分的实现代码 加密部分实现: package token.exe; import java.math.BigInteger; import java.util.Random; ...

js实现一个砖头在页面拖拉效果

用js实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果: 刚开始时: 鼠标点击拖动后: 实现代码:

django 常用命令

django 常用命令,备忘: django-admin.py startproject test 创建一个项目名叫test的项目 python manage.py startapp app 创建一个 ...

Apache+php配置 Mysql安装出错解决办法

此文包括的注意内容:软件版本及下载地址Apache2.4的配置和安装php7.0的配置mysql5.5的安装常见问题及解决方法1.软件版本Windows server 2008 r2+ 64位Apac ...

自学Zabbix3.8.1.3-可视化Visualisation-Graphs特殊图表

自学Zabbix3.8.1.3-可视化Visualisation-Graphs特殊图表 虽然一个简单的图表和自定义图标很适合访问一个项目的数据,但这两个都不允许在多个项目中快速创建一个比较图表.为了解 ...

MFC：Tab控件嵌入对话框

1.先建立一个对话框MFC应用程序,然后在工具箱里面把Tab Control控件放到对话框中的合适位置上. 再在对话框类中,声明一个CTabCtrl变量: CTabCtrl m_tab; 变量m_ta ...

.net 操作MongoDB 基础

1. 下载驱动,最好使用 NuGet 下载,直接搜索MongoDB: 2. 引用相关驱动 3. 部分测试代码,主要是针对MongoDB的GridFS 文件存储来用 using Mongo.Model; ...

1. Python3 环境搭建

Python3 环境搭建 开门见山,其他关于Python发展史.语言类型.优缺点等等 可以自己去百度百度,这里就不多说了.其实基本想要学这门语言的时候,你已经了解差不多了!!! Python的运行环境 ...

Codeforces D - The Child and Zoo

D - The Child and Zoo 思路: 并查集+贪心 每条边的权值可以用min(a[u],a[v])来表示,然后按边的权值从大到小排序 然后用并查集从大的边开始合并,因为你要合并的这两个联 ...