html5中怎么画菱形、多边形？

html-css020

html5中怎么画菱形、多边形？,第1张

一、多边形类:polygon.js

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)

这个图里面，用的好像是背景菱形图片吧，