html5中怎么画菱形、多边形？_随笔

一、多边形类: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>

<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>

描边颜色: <select id='strokeStyleSelect'>

<option value='green'>green</option>

<option value='orange'>orange</option>

<option value='goldenrod'>goldenrod</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='purple'>purple</option>

</select>

边数: <select id='sidesSelect'>

</select>

开始角度: <select id='startAngleSelect'>

</select>

是否填充 <input id='fillCheckbox' type='checkbox' checked/>

</div>

编辑: <input type='checkbox' id='editCheckbox'/>

</div>

</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)

})

}

希望能够帮助到你！

svg

即

scalable

vector

graphics，是一种用来绘制矢量图的

html5

标签。你只需定义好xml属性，就能获得一致的图像元素。

使用svg之前先将标签加入到html

body中。就像其他的html标签一样，你可以为svg标签为之添加id属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。svg标签跟其它的html标签有通用的属性。你可以用height="100px"

width="200px"

为其添加高度和宽度。

现在就将svg元素加入到我们html代码中，svg提供很多绘图形状，例如线条、圆、多边形等。

svg线条：

svg线条用标签定义，在此标签内你还可以定义其他的属性。

该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:green”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。

svg画圆：

svg提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为mycircle。为了定义圆的中心以及半径，使用cx="55"

cy="55"以及r="50"属性分别定义。使用fill="#219e3e"为圆填充颜色。同样你可以用stroke="#17301d"

stroke-width="2"定义圆周线条颜色和宽度。

svg矩形:

同样的使用标签来画矩形，我们同样设置了

属性

“myrectangle”

,用

width="300"

height="100"

定义高宽，使用

fills

属性定义填充颜色。用

strock

定义边框。还有一点需要注意，我用

fill-opacity="0.5"

stroke-opacity="0.5"

为

stroke

和

filling

都添加了透明度。

svg椭圆：

我们同样是用标签来绘制椭圆。设置其

id="myellipse"

，给定起中心坐标

cx="120"cy="60"，长轴短轴半径

rx="100"

ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3f5208stroke:blackstroke-width:3"。

svg多边形：

我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如

points="10,10

75,150

150,60"

，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用

style="fill:#63bcf7stroke:blackstroke-width:3"

定义多边形填充颜色、边框以及边框宽度。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6240105.html

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

发表评论

评论列表（0条）