|
话不多说，直接上代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DrawCanvas</title>
<script src="./DrawCanvas.js"></script>
</head>
<body>
<div>
<canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</div>
</body>
<script>
var width = 1620;
var height = 1080;
var step = width / 30;
var drawCanvas = DrawCanvas.createNew();
drawCanvas.canvas = document.getElementById("myCanvas");
if (drawCanvas.canvas) {
drawCanvas.canvas.setAttribute("width", width);
drawCanvas.canvas.setAttribute("height", height);
drawCanvas.canvas.style.zIndex = 1;
drawCanvas.canvas.style.position = "absolute";
drawCanvas.canvas.style.top = 0;
drawCanvas.canvas.style.left = 0;
drawCanvas.initCanvasContext();
}
if (drawCanvas.canvas) {
drawCanvas.setFillColor("#F40002");
drawCanvas.drawRectangle(
{
x: 0,
y: 0
}, width, height, 1, 1);
drawCanvas.setFillColor("#FAF408");
drawCanvas.drawPentangle(
{
x: 5 * step,
y: 5 * step
}, 3 * step, 1, 1);
drawCanvas.drawPentangle(
{
x: 10 * step,
y: 2 * step
}, 1 * step, 1, 1);
drawCanvas.drawPentangle(
{
x: 12 * step,
y: 4 * step
}, 1 * step, 1, 1);
drawCanvas.drawPentangle(
{
x: 12 * step,
y: 7 * step
}, 1 * step, 1, 1);
drawCanvas.drawPentangle(
{
x: 10 * step,
y: 9 * step
}, 1 * step, 1, 1);
}
</script>
</html>
DrawCanvas.js
function drawRectangle(context, point, width, height, lineType, fillType) {
if (!context) return;
if(lineType === 0) {
context.setLineDash([3, 3]);
} else if(lineType === 1) {
context.setLineDash([]);
}
if (fillType === 0)
context.strokeRect(point.x, point.y, width, height);
else if(fillType === 1)
context.fillRect(point.x, point.y, width, height);
else {
context.strokeRect(point.x, point.y, width, height);
context.fillRect(point.x, point.y, width, height);
}
}
function calculatePentanglePoints(center, r) {
var points = new Array();
var point = new Object();
var radian = 72 * Math.PI / 180;
point.x = center.x;
point.y = center.y - r;
points.push(point);
point = new Object();
point.x = center.x + r * Math.sin(radian);
point.y = center.y - r * Math.cos(radian);
points.push(point);
point = new Object();
radian = 36 * Math.PI / 180;
point.x = center.x + r * Math.sin(radian);
point.y = center.y + r * Math.cos(radian);
points.push(point);
point = new Object();
point.x = center.x - r * Math.sin(radian);
point.y = center.y + r * Math.cos(radian);
points.push(point);
point = new Object();
radian = 72 * Math.PI / 180;
point.x = center.x - r * Math.sin(radian);
point.y = center.y - r * Math.cos(radian);
points.push(point);
return points;
}
function drawPentangle(context, center, r, lineType, fillType) {
if (!context) return;
if(lineType === 0) {
context.setLineDash([3, 3]);
} else if(lineType === 1) {
context.setLineDash([]);
}
const pentanglePoints = calculatePentanglePoints(center, r);
for (let i = 0; i < 5; i++) {
console.log("[" + pentanglePoints[i].x + ", " + pentanglePoints[i].y + "]");
}
context.beginPath();
context.moveTo(pentanglePoints[0].x, pentanglePoints[0].y);
context.lineTo(pentanglePoints[3].x, pentanglePoints[3].y);
context.lineTo(pentanglePoints[1].x, pentanglePoints[1].y);
context.lineTo(pentanglePoints[4].x, pentanglePoints[4].y);
context.lineTo(pentanglePoints[2].x, pentanglePoints[2].y);
context.closePath();
if (fillType === 0)
context.stroke();
else if(fillType === 1)
context.fill();
else {
context.fill();
context.stroke();
}
}
var DrawCanvas = {
createNew: function() {
var drawCanvasObj = {};
drawCanvasObj.canvas = undefined;
drawCanvasObj.context = undefined;
drawCanvasObj.initCanvasContext = function() {
drawCanvasObj.context = drawCanvasObj.canvas.getContext("2d");
drawCanvasObj.context.strokeStyle = "black";
drawCanvasObj.context.fillStyle = "red";
drawCanvasObj.context.lineWidth = 1;
};
drawCanvasObj.setStrokeColor = function(color) {
drawCanvasObj.context.strokeStyle = color;
};
drawCanvasObj.setFillColor = function(color) {
drawCanvasObj.context.fillStyle = color;
};
drawCanvasObj.drawRectangle = function(leftTop, width, height, lineType, fillType) {
if (!drawCanvasObj.context) return;
drawRectangle(drawCanvasObj.context, leftTop, width, height, lineType, fillType);
};
drawCanvasObj.drawPentangle = function(center, r, lineType, fillType) {
if (!drawCanvasObj.context) return;
drawPentangle(drawCanvasObj.context, center, r, lineType, fillType);
};
return drawCanvasObj;
}
};
|