html5中怎么画菱形，多边形

Posted 2023-04-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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=0; i < 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=1; i < 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/html; charset=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.5; i < context.canvas.width; i += stepx)
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);

context.stroke();
context.beginPath();
for (var i = stepy + 0.5; i < context.canvas.height; i += 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);
);

希望能够帮助到你！参考技术A 使用transform的skew()，例如 transform：skewX(10deg)