变换坐标系后的绘图：
（1）提供四个文本框(x,y,angle,scale)，输入参数值后，将坐标系变换(平移+旋转+缩放)到该位置处；
（2）提供一个检查框，提供对所绘制的图形“是否错切”进行控制；
（3）再提供一个文本框，输入一个单词，将这个单词绘制在新的坐标系中。
从而实现平移、旋转、缩放、错切、绘制5项功能
变换坐标系后绘图.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变换坐标系后绘图</title>
<style>
body {
background: #eeeeee;
}
#canvas {
background: #ffffff;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id='controls'>
平移：
X:<input type="text" id="newX" />
Y:<input type="text" id="newY" />
旋转:<input type="text" id="newAngle" />
缩放:<input type="text" id="newScale" />
错切： <input type='checkbox' id='ShearCheckbox'/>
绘制文本:<input type="text" id="newText" />
<input id='drawButton' type='button' value='绘制'/>
<canvas id="canvas" width="1500" height="1000"></canvas>
<script src="变换坐标系后绘图.js"></script>
</body>
</html>
变换坐标系后绘图.js
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
newX = document.getElementById('newX'),
newY = document.getElementById('newY'),
newAngle = document.getElementById('newAngle'),
newScale = document.getElementById('newScale'),
ShearCheckbox = document.getElementById('ShearCheckbox'),
newText = document.getElementById('newText'),
drawButton = document.getElementById('drawButton');
function AxesTrans(){
var sin=Math.sin(newAngle.value*Math.PI/180),
cos=Math.cos(newAngle.value*Math.PI/180);
context.save();
context.setTransform(newScale.value*cos,sin,-sin,newScale.value*cos,newX.value,newY.value);
}
function AxesShear(){
context.save();
context.transform(1,0,0.7,1,0,0);
}
function drawText(){
context.save();
context.font='50pt Comic-sans';
context.fillStyle="cornflowerblue";
context.fillText(newText.value,0,50);
context.strokeStyle="yellow";
context.strokeText(newText.value,0,50);
}
drawButton.onclick=function(e){
AxesTrans();
if(ShearCheckbox.checked){
AxesShear();
}
drawText();
}
效果如图所示：
网友评论