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

html-css033

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)

})

}

希望能够帮助到你！

<html>

<body>

<div>

<img src="test.jpg"usemap="#Map">

</div>

<map name="Map">

    <area shape="poly" coords="0,43,43,0,120,0,163,43,120,86,43,86" href="#">

    <area shape="poly" coords="163,43,206,0,285,0,328,43,285,86,206,86" href="#">

</map>

</body>

</html>

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。

多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

x1,y1,x2,y2,..,xn,yn    如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。  

也可以按别的顺序来画，如234561

在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“

文字块一

文字块二

文字块三

”，而用“

文字块一

文字块二

文字块三

”更合适。 用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图： CSS排版结果图 演示地址：css2.html 用div来定义语义结构 现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图） 典型版面分栏结构 其结构代码如下：

上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成: