canvas画布变形效果
HTML5的变形效果实现，包括：移动，缩放，旋转，自定义变形，裁剪，镜像，变形重置等等操作
下面依次讲解：
①移动 / 位移
使用context上下文的translate方法，我们可以控制图形的位置移动，相关方法如下：
context.translate(100, 100); //x轴和y轴移动距离，这里上线文分别移动100个像素
使用translate方法，可以有效的控制context的起始点位置，因为context位置变化，导致绘制图形位置也变化，因此可以方便的在合适位置绘制图形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5画布图形位移</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script type="text/javascript">
/*相关Javascript*/
var canvas = document.getElementById('mycanvas');
context = canvas.getContext('2d'),
elementwidth = 100,
elementheight = 100;
//为了实现位移效果，使用如下方法：
context.translate(100, 100);
//然后绘制图形，这里我们生成一个矩形
context.fillStyle = 'orange';
context.fillRect(0, 0, elementwidth, elementheight); //这个矩形左上角坐标(0, 0)，宽度和高度均为100px
//注意：translate在你绘制图形之前调用
</script>
</body>
</html>②缩放
使用context上下文的scale方法，我们可以控制图形的缩放，相关方法如下：
context.scale(50%, 50%); //x轴和y轴缩放比例使用scale方法，可以有效的控制context的缩放，因为context缩放变化，导致绘制图形也变化
相关推荐
jinxiutong 2020-05-10
MIKUScallion 2020-02-22
songfens 2020-01-10
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06