Javascript HTML5画布在画布中心的轴上绘制_Javascript_Html_Canvas

Javascript HTML5画布在画布中心的轴上绘制

javascript html canvas

Javascript HTML5画布在画布中心的轴上绘制,javascript,html,canvas,Javascript,Html,Canvas,我试着在已经画了轴的画布上画画。我需要在轴的两边画一个n边的多边形。当我在画布上单击并拖动时，形状需要显示，但它不工作。下面是transform.html的代码： <!DOCTYPE html> <html> <head> <title>Drawing Application</title> </head> <body> <center> <canvas id="myCanvas" widt

我试着在已经画了轴的画布上画画。我需要在轴的两边画一个n边的多边形。当我在画布上单击并拖动时，形状需要显示，但它不工作。下面是transform.html的代码：

<!DOCTYPE html>
<html>
<head>
 <title>Drawing Application</title>
</head>
<body>
<center>
<canvas id="myCanvas" width="1100" height="550"></canvas>
<br><output id="out"></output>
</center>
<div id="controls">
  <p><input type="radio" name="shape" value="polygon">Polygon</p>
</div>
<p><label>Polygon Sides: <input id="polygonSides" type="range" step="1" min="3" max="10"></label></p>
<script src="transform.js"></script>
</body>
</html>


绘图应用


多边形
多边形边：

transform.js：

var canvas,ctx,dragging = false ,dragStartLocation,snapshot,shapeBox,fillColor,lineWidth,strokeColor,canvasColor,clearCanvas;

canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");

var transX = canvas.width * 0.5;
var transY = canvas.height * 0.5;


ctx.translate(transX, transY);

ctx.fillRect(0, -transY, 1, canvas.height);
ctx.fillRect(-transX, 0, canvas.width, 1);

function dragStart(event) {
dragging = true;
dragStartLocation = getCanvasCoordinates(event);
takeSnapshot();
}

function drag(event) {
var position;
if (dragging === true) {
    restoreSnapshot();
    position = getCanvasCoordinates(event);
    draw(position, "polygon");
}
}

function dragStop(event) {
dragging = false;
restoreSnapshot();
var position = getCanvasCoordinates(event);
draw(position, "polygon");
}

canvas.onmousemove = function(e) {
var pos = getMousePos(canvas, e);
out.innerHTML = 'X:' + pos.x + ' Y:' + pos.y;    
}

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
    x: evt.clientX - rect.left - transX,
    y: evt.clientY - rect.top - transY
};
}

function drawPolygon(position, sides, angle) {
var coordinates = [],
    radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
    index = 0;

for (index = 0; index < sides; index++) {
    coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
    angle += (2 * Math.PI) / sides;
}

ctx.beginPath();
ctx.moveTo(coordinates[0].x, coordinates[0].y);
for (index = 1; index < sides; index++) {
    ctx.lineTo(coordinates[index].x, coordinates[index].y);
}

ctx.closePath();
}


function draw(position) {

var shape = document.querySelector('input[type="radio"][name="shape"]:checked').value,
    polygonSides = document.getElementById("polygonSides").value;

if (shape === "polygon") {
    drawPolygon(position, polygonSides, Math.PI / 4);
}

else {
    ctx.stroke();
}
}

canvas.addEventListener('mousedown', dragStart, false);
canvas.addEventListener('mousemove', drag, false);
canvas.addEventListener('mouseup', dragStop, false);

var canvas，ctx，dragging=false，dragStartLocation，snapshot，shapeBox，fillColor，lineWidth，strokeColor，canvasColor，clearCanvas；
canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
var transX=画布宽度*0.5；
变量transY=画布高度*0.5；
翻译（transX，transY）；
ctx.fillRect（0，-transY，1，画布高度）；
ctx.fillRect（-transX，0，canvas.width，1）；
函数dragStart（事件）{
拖动=真；
dragStartLocation=getCanvasCoordinates（事件）；
takeSnapshot（）；
}
函数拖动（事件）{
var位置；
如果（拖动===真）{
恢复napshot（）；
位置=获取画布坐标（事件）；
绘制（位置，“多边形”）；
}
}
功能dragStop（事件）{
拖动=假；
恢复napshot（）；
var位置=获取画布坐标（事件）；
绘制（位置，“多边形”）；
}
canvas.onmousemove=函数（e）{
var pos=getMousePos（画布，e）；
out.innerHTML='X:'+pos.X+'Y:'+pos.Y；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left-transX，
y:evt.clientY-rect.top-transY
};
}
函数drawPolygon（位置、边、角度）{
变量坐标=[]，
radius=Math.sqrt（Math.pow（（dragStartLocation.x-position.x），2）+Math.pow（（dragStartLocation.y-position.y），2）），
指数=0；
用于（索引=0；索引<边；索引+）{
坐标.push（{x:dragStartLocation.x+半径*Math.cos（角度），y:dragStartLocation.y-半径*Math.sin（角度）}）；
角度+=（2*Math.PI）/边；
}
ctx.beginPath（）；
移动到（坐标[0].x，坐标[0].y）；
用于（索引=1；索引<边；索引+）{
ctx.lineTo（坐标[index].x，坐标[index].y）；
}
ctx.closePath（）；
}
功能图（位置）{
var shape=document.querySelector（'input[type=“radio”][name=“shape”]：checked'）。值，
polygonSides=document.getElementById（“polygonSides”）.value；
如果（形状==“多边形”）{
drawPolygon（位置、多边形、Math.PI/4）；
}
否则{
ctx.stroke（）；
}
}
canvas.addEventListener（'mousedown'，dragStart，false）；
canvas.addEventListener（'mousemove'，drag，false）；
canvas.addEventListener（'mouseup'，dragStop，false）；

我找不到我的错误。请帮助。

请先阅读我添加的更多详细信息。我只是觉得完整的代码对你们更好地理解它会很有用。：/下次我会记住的，谢谢。GetCanvasCoordination、takeSnapshot和restoreSnapshot没有定义。你忘了包括那些吗？是的，我想我忘了包括。我编辑了我的问题以添加它。它仍然不起作用。你能告诉我怎么了吗？