var Point = function (x, y) {
this.x = x
this.y = y
}
var Polygon = function (centerX, centerY, radius, sides, startAngle, strokeStyle, fillStyle, filled) {
this.x = centerX//外接圆心x坐标
this.y = centerY
this.radius = radius//外接圆半径
this.sides = sides//边数
this.startAngle = startAngle//开始角度
this.strokeStyle = strokeStyle
this.fillStyle = fillStyle
this.filled = filled
}
Polygon.prototype = {
getPoints: function () {//获取多边形所有顶点
var points = [],
angle = this.startAngle || 0
for (var i=0i <this.sides++i) {
points.push(new Point(this.x + this.radius * Math.sin(angle),
this.y - this.radius * Math.cos(angle)))
angle += 2*Math.PI/this.sides
}
return points
},
createPath: function (context) {//创建多边形路径
var points = this.getPoints()
context.beginPath()
context.moveTo(points[0].x, points[0].y)
for (var i=1i <this.sides++i) {
context.lineTo(points[i].x, points[i].y)
}
context.closePath()
},
stroke: function (context) {//对多边形描边
context.save()
this.createPath(context)
context.strokeStyle = this.strokeStyle
context.stroke()
context.restore()
},
fill: function (context) {//填充
context.save()
this.createPath(context)
context.fillStyle = this.fillStyle
context.fill()
context.restore()
},
move: function (x, y) {
this.x = x
this.y = y
},
}
二、HTML文件
<html>
<head>
<META http-equiv="Content-Type" content="text/htmlcharset=gbk">
<title>拖动多边形</title>
<style>
body{
background: #eeeeee
}
#dragDiv {
position: absolute
left: 25px
top: 50px
}
#controls {
position: absolute
left: 25px
top: 25px
}
#canvas {
background: #ffffff
cursor: crosshair
margin-left: 10px
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>
<canvas id='canvas' width='850' height='500'>Canvas not supported</canvas>
<div id='controls'>
描边颜色: <select id='strokeStyleSelect'>
<option value='red' selected>red</option>
<option value='green'>green</option>
<option value='blue'>blue</option>
<option value='orange'>orange</option>
<option value='goldenrod'>goldenrod</option>
<option value='navy'>navy</option>
<option value='purple'>purple</option>
</select>
填充颜色: <select id='fillStyleSelect'>
<option value='rgba(255,0,0,0.5)'>semi-transparent red</option>
<option value='green'>green</option>
<option value='orange'>orange</option>
<option value='goldenrod' selected>goldenrod</option>
<option value='navy'>navy</option>
<option value='purple'>purple</option>
</select>
边数: <select id='sidesSelect'>
<option value=4 select>4</option>
<option value=6>6</option>
<option value=8>8</option>
<option value=10>10</option>
<option value=12>12</option>
<option value=20>20</option>
</select>
开始角度: <select id='startAngleSelect'>
<option value=0 select>0</option>
<option value=22.5>22.5</option>
<option value=45>45</option>
<option value=67.5>67.5</option>
<option value=90>90</option>
</select>
是否填充 <input id='fillCheckbox' type='checkbox' checked/>
<input id='eraseAllButton' type='button' value='清除所有'/>
</div>
<div id='dragDiv'>
编辑: <input type='checkbox' id='editCheckbox'/>
</div>
<script src = 'polygon.js'></script>
<script src = 'example.js'></script>
</body></html>
三、JS文件example.js
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
//清除按钮
eraseAllButton = document.getElementById('eraseAllButton'),
//描边颜色
strokeStyleSelect = document.getElementById('strokeStyleSelect'),
//画多边形的开始角度
startAngleSelect = document.getElementById('startAngleSelect'),
//填充颜色
fillStyleSelect = document.getElementById('fillStyleSelect'),
//不否填充
fillCheckbox = document.getElementById('fillCheckbox'),
//进入编辑
editCheckbox = document.getElementById('editCheckbox'),
//边数
sidesSelect = document.getElementById('sidesSelect'),
//canvas位图数据
drawingSurfaceImageData,
//记录鼠标按下的位置
mousedown = {},
//橡皮筋矩形框
rubberbandRect = {},
dragging = false,//是否在拖动状态
draggingOffsetX,
draggingOffsetY,
sides = 8,
startAngle = 0,
guidewires = true,
editing = false,
//保存已绘制的多边形
polygons = []
// Functions..........................................................
//画网络线
function drawGrid(color, stepx, stepy) {
context.save()
context.shadowColor = undefined
context.shadowBlur = 0
context.shadowOffsetX = 0
context.shadowOffsetY = 0
context.strokeStyle = color
context.fillStyle = '#ffffff'
context.lineWidth = 0.5
context.fillRect(0, 0, context.canvas.width, context.canvas.height)
context.beginPath()
for (var i = stepx + 0.5i <context.canvas.widthi += stepx) {
context.moveTo(i, 0)
context.lineTo(i, context.canvas.height)
}
context.stroke()
context.beginPath()
for (var i = stepy + 0.5i <context.canvas.heighti += stepy) {
context.moveTo(0, i)
context.lineTo(context.canvas.width, i)
}
context.stroke()
context.restore()
}
//窗口坐标转canvas坐标
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect()
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
}
}
// 保存或恢复已绘制的画面...................................
function saveDrawingSurface() {
drawingSurfaceImageData = context.getImageData(0, 0,canvas.width,canvas.height)
}
function restoreDrawingSurface() {
context.putImageData(drawingSurfaceImageData, 0, 0)
}
// 画多边形.....................................................
function drawPolygon(polygon) {
context.beginPath()
polygon.createPath(context)
polygon.stroke(context)
if (fillCheckbox.checked) {
polygon.fill(context)
}
}
// 更新橡皮筋矩形框...................................................
function updateRubberbandRectangle(loc) {
rubberbandRect.width = Math.abs(loc.x - mousedown.x)
rubberbandRect.height = Math.abs(loc.y - mousedown.y)
if (loc.x >mousedown.x) rubberbandRect.left = mousedown.x
else rubberbandRect.left = loc.x
if (loc.y >mousedown.y) rubberbandRect.top = mousedown.y
else rubberbandRect.top = loc.y
}
//以鼠标按下点为圆心，橡皮筋框宽为半径创建多边形
function drawRubberbandShape(loc, sides, startAngle) {
var polygon = new Polygon(mousedown.x, mousedown.y,
rubberbandRect.width,
parseInt(sidesSelect.value),
(Math.PI / 180) * parseInt(startAngleSelect.value),
context.strokeStyle,
context.fillStyle,
fillCheckbox.checked)
drawPolygon(polygon)//画多边形
if (!dragging) {//保存这个多边形
polygons.push(polygon)
}
}
//更新橡皮筋
function updateRubberband(loc, sides, startAngle) {
updateRubberbandRectangle(loc)
drawRubberbandShape(loc, sides, startAngle)
}
// 网络线.................................................
function drawHorizontalLine (y) {
context.beginPath()
context.moveTo(0,y+0.5)
context.lineTo(context.canvas.width,y+0.5)
context.stroke()
}
function drawVerticalLine (x) {
context.beginPath()
context.moveTo(x+0.5,0)
context.lineTo(x+0.5,context.canvas.height)
context.stroke()
}
function drawGuidewires(x, y) {
context.save()
context.strokeStyle = 'rgba(0,0,230,0.4)'
context.lineWidth = 0.5
drawVerticalLine(x)
drawHorizontalLine(y)
context.restore()
}
//绘制保存的所有多边形
function drawPolygons() {
polygons.forEach( function (polygon) {
drawPolygon(polygon)
})
}
希望能够帮助到你！
菱形是由正方形旋转45度后形成的图片，所有我们首先需要新建一个正方形，然后把正方形旋转45度既可以得到菱形了。-moz-transform:rotate(45deg)
-webkit-transform:rotate(45deg)
-o-transform:rotate(45deg)
transform:rotate(45deg)
这个图里面，用的好像是背景菱形图片吧，
