绘制变形图形--Canvas的基本操作

1、坐标的变换

对坐标的变换处理，有如下三种方式。
平移
移动图形的绘制主要是通过translate 方法来实现的，该方法定义如下所示。
context. translate(x, y);
translate 方法使用两个参数——x表示将坐标轴原点向左移动多少个单位，默认情况下
为像素；y表示将坐标轴原点向下移动多少个单位。
缩放
使用图形上下文对象的scale方法将图形缩放。该方法的定义如下所示。
context.scale(x,y);
scale方法使用两个参数，x是水平方向的放大倍数，y是垂直方向的放大倍数。将图形缩
小的时候，将这两个参数设置为0到1之间的小数就可以了，例如0.5是指将图形缩小一
半。
旋转
使用图形上下文对象的rotate方法将图形进行旋转。该方法的定义如下所示。
context.rotate(angle);
rotate方法接受一个参数angle，angle是指旋转的角度，旋转的中心点是坐标轴的原点
。旋转是以顺时针方向进行的，要想逆时针旋转时，将angle设定为负数就可以了。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>绘制变形的图形</title>
<script >
function draw(id)
{  var canvas = document.getElementById(id);  if (canvas == null)  return false;  var context = canvas.getContext('2d');  context.fillStyle = "#FFF"; //设置背景色为白色context.fillRect(0, 0, 400, 300);  //创建一个画布// 图形绘制 context.translate(200,50);  context.fillStyle = 'rgba(255,0,0,0.25)';  for(var i = 0;i < 50;i  ){  context.translate(25,25);  //图形向左，向下各移动25context.scale(0.95,0.95);  //图形缩放context.rotate(Math.PI / 10);  //图形旋转context.fillRect(0,0,100,50);  }
}
</script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>

2、矩阵变换

变换矩阵，这个矩阵是专门用来实现图形变形的，它与坐标一起配合使用，以达到变形的目的。当图形上下文被创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对这个变换矩阵进行修改，那么接下来绘制的图形将以画布的最左上角的坐标原点绘制图形，绘制出来的图形也经过缩放、变形的处理，但是如果对这个变换矩阵进行修改，那么情况将会是不一样的。使用图形上下文对象的transform方法修改变换矩阵，该方法的定义如下所示。
transform(m11, m12, m21, m22, dx, dy)
该方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算，该变换矩阵的形式如下所示。

m11	m21	dx
m12	m22	dy
0	0	1

其中m11，m21，m12，m22四个参数用来修改使用这个方法之后绘制图形时的计算方法，以达到变形目的，dx与dy参数移动坐标原点，dx表示将坐标原点在x轴上向右移动x个单位，dy表示将坐标原点在y轴上向下移动y个单位。默认情况下以像素为单位。
下面通过实例1来看一下transform方法的工作原理。在该实例中，用循环的方法绘制了几个圆弧，圆弧的大小与位置均不变，只是使用了transform方法让坐标原点每次向下移动10个像素，使得绘制出来的圆弧相互重叠，然后对圆弧设置七彩颜色，使这些圆弧的外观达到彩虹的效果。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>transform方法的实例</title>
<script >
function draw(id)
{  var canvas = document.getElementById(id);  var context = canvas.getContext('2d');  /* 定义颜色 */var colors = ["red", "orange", "yellow", "green", "blue", "navy", "purple"];/* 定义线宽*/context.lineWidth = 10;context.transform(1, 0, 0, 1, 100,0)/*循环绘制圆弧*/for( var i=0; i<colors.length; i   ) {/* 定义每次向下移动10个像素的变换矩阵 */context.transform(1, 0, 0, 1, 0, 10);/* 设定颜色 */context.strokeStyle = colors[i];/* 绘制圆弧 */context.beginPath();context.arc(50, 100, 100, 0, Math.PI, true);context.stroke();}
}
</script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>

下面通过实例2来了解一下setTransform的具体的使用
方法。在该实例中首先创建一个红色边框的长方形，然后将该长
方形顺时针旋转45度，绘制出一个新的长方形，并且绘制其边框为绿色，然后将红色长方形扩大2.5倍绘制新的长方形，边框为蓝色，最后在红色长方形右下方绘制同样大小的长方形，边框为灰色。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>setTransform方法的实例</title>
<script >
function draw(id)
{  var canvas = document.getElementById(id);  var context = canvas.getContext('2d');  /* -------------绘制红色长方形-------- */context.strokeStyle = "red";context.strokeRect(30, 10, 60, 20);/* -----绘制顺时针旋转45°后的绿色长方形------ */var rad = 45 * Math.PI / 180;  //绘制45度圆弧context.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad),
Math.cos(rad), 0, 0 );  //定义顺时针旋转45°的变换矩阵/* -----------绘制图形---- */context.strokeStyle = "green";context.strokeRect(30, 10, 60, 20);/* ------绘制放大2.5倍后的蓝色长方形-------- */context.setTransform(2.5, 0, 0, 2.5, 0, 0);    //定义放大2.5倍的变换矩阵 /* 绘制图形 */context.strokeStyle = "blue";context.strokeRect(30, 10, 60, 20);/* 将坐标原点向右移动40像素，向下移动80像素后绘制灰色长方形*/context.setTransform(1, 0, 0, 1, 40, 80); //定义将坐标原点向右移动40像素，向下移动80像素的矩阵/* 绘制图形 */context.strokeStyle = "gray";context.strokeRect(30, 10, 60, 20);
}
</script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>

绘制变形图形--Canvas的基本操作相关推荐

绘制渐变图形--Canvas的基本操作
1.绘制线性渐变渐变的概念:渐变是指在填充时从一种颜色慢慢过渡到另外一种的颜色. 绘制线性渐变时,需要使用到LinearGradient对象.使用图像上下文对象的createLinearGradie ...
HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形
1.线性渐变 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
Canvas3——绘制渐变图形与绘制变形图形
1.Canvas绘制渐变图形 (1)绘制线性渐变 createLinearGradient() **CanvasRenderingContext2D**.createLinearGradient()方 ...
Fabricjs在Canvas上使用路径Path绘制不规则图形
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性: Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的 ...
《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形
本节书摘来自华章计算机<HTML5 Canvas游戏开发实战>一书中的第2章,第2.1节,作者:张路斌著, 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2. ...
html5画分形图形,2.5 绘制透明图形 - HTML5 Canvas 实战
对于需要图形分层的应用,经常需要处理透明度.本节,我们将学习如何使用全局透明度设置图形的透明度. 图2-5 绘制透明图形绘制步骤按照以下步骤,在一个不透明的矩形之上,绘制一个透明的圆: 1. 定义 ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
canvas 绘制直线并选中_在画布中使用路径-Canvas的基本操作
一.在画布中使用路径 beginPath() 新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径moveTo(x, y) 把画笔移动到指定的坐标(x, y).相当于设置路径的起始点坐标 ...

绘制变形图形--Canvas的基本操作

1、坐标的变换

2、矩阵变换

绘制变形图形--Canvas的基本操作相关推荐

最新文章

热门文章