在畫布上繪制形狀
[英]Drawing shapes on canvas
問題描述
使用下面的代碼我可以在畫布上用鼠標點繪制線條。 我需要檢測繪圖線何時完成一個形狀並用一些顏色填充它。
<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var worksheetCanvas = $('#worksheet-canvas');
var context = worksheetCanvas.get(0).getContext("2d");
var clicked = false;
// The array of stored lines
var storedLines = [];
// The object for the last stored line
var storedLine = {};
var mouse = {
x: -1,
y: -1
}
var parentOffset = $('#canvas-holder').parent().offset();
worksheetCanvas.click(function (e) {
clicked = true;
mouse.x = e.pageX - parentOffset.left;
mouse.y = e.pageY - parentOffset.top;
context.moveTo(mouse.x, mouse.y);
// Push last line to the stored lines
if (clicked) {
storedLines.push({
startX: storedLine.startX,
startY: storedLine.startY,
endX: mouse.x,
endY: mouse.y
});
}
// set last line coordinates
storedLine.startX = mouse.x;
storedLine.startY = mouse.y;
$(this).mousemove(function (k) {
// clear the canvas
context.clearRect(0, 0, 960, 500);
context.beginPath();
context.strokeStyle = "rgb(180,800,95)";
// draw the stored lines
for (var i = 0; i < storedLines.length; i++) {
var v = storedLines[i];
context.moveTo(v.startX, v.startY);
context.lineTo(v.endX, v.endY);
context.stroke();
}
context.moveTo(mouse.x, mouse.y);
context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
context.stroke();
context.closePath();
})
})
});
</script>
</head>
<body>
<div id="canvas-holder">
<canvas id="worksheet-canvas" width="960" height="500" style="background:black;">
</canvas>
</div>
</body>
</html>
2 個解決方案
解決方案1
3 已采納 2013-03-20 15:37:26
[海報澄清后編輯]
此代碼將繪制/繼續折線到用戶下次點擊的位置。
如果用戶在他們開始的綠色圓圈中單擊回來，則會填充折線。
這是代碼和小提琴： http ： //jsfiddle.net/m1erickson/qwd2a/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasMouseX;
var canvasMouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var storedLines=[];
var startX=0;
var startY=0;
var radius=7;
ctx.strokeStyle="orange";
ctx.font = '12px Arial';
$("#canvas").mousedown(function(e){handleMouseDown(e);});
function handleMouseDown(e){
canvasMouseX=parseInt(e.clientX-offsetX);
canvasMouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
if(hitStartCircle(canvasMouseX, canvasMouseY)){
fillPolyline();
return;
}
storedLines.push({x:canvasMouseX,y:canvasMouseY});
if(storedLines.length==1){
startX=canvasMouseX;
startY=canvasMouseY;
ctx.fillStyle="green";
ctx.beginPath();
ctx.arc(canvasMouseX, canvasMouseY, radius, 0 , 2 * Math.PI, false);
ctx.fill();
}else{
var c=storedLines.length-2;
ctx.strokeStyle="orange";
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(storedLines[c].x,storedLines[c].y);
ctx.lineTo(canvasMouseX, canvasMouseY);
ctx.stroke();
}
}
function hitStartCircle(x,y){
var dx=x-startX;
var dy=y-startY;
return(dx*dx+dy*dy<radius*radius)
}
function fillPolyline(){
ctx.strokeStyle="red";
ctx.fillStyle="blue";
ctx.lineWidth=3;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(storedLines[0].x,storedLines[0].y);
for(var i=0;i<storedLines.length;i++){
ctx.lineTo(storedLines[i].x,storedLines[i].y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
storedLines=[];
}
$("#clear").click(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
storedLines=[];
});
}); // end $(function(){});
</script>
</head>
<body>
<p>Click to draw lines</p>
<p>Click back in the green circle to close+fill</p><br/>
<canvas id="canvas" width=300 height=300></canvas><br/>
<button id="clear">Clear Canvas</button>
</body>
</html>
[基於較少信息的先前答案]
看起來你正試圖：
- 讓用戶單擊畫布上的點。
- 在storedLines []中收集這些點。
- 之后，使用storedLines []繪制線條+填充顏色。
- （我假設您不希望在用戶點擊時立即繪制線條，因為您說“我需要檢測繪圖線何時完成...” 。）如果您確實想在用戶點擊時立即繪制，請留下評論，我也可以幫助你的替代方案;）
如果我建議您在代碼中進行一些清理：
這是在畫布上獲取鼠標位置的好方法：
// before you begin listening for mouseclicks,
// get the canvas’ screen position into offsetX/offsetY
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
// then when a mousedown event occurs
// use e.clientX/Y (not e.pageX/Y) to get the mouse position on the canvas
canvasMouseX=parseInt(e.clientX-offsetX);
canvasMouseY=parseInt(e.clientY-offsetY);
當您實際使用context和storedLines繪制路徑時：
- 要關閉路徑，請將context.closePath（）放在context.stroke（）和context.fill（）之前。
- 設置fillStyle和strokeStyle。
做context.fill（）和context.stroke（） - 如果你沒有填充（），你就不會得到顏色填充。
// close a path context.closePath(); context.fillStyle=”blue”; context.strokeStyle=”rgb(180,80,95)”; context.fill(); context.stroke();
這是代碼和小提琴： http ： //jsfiddle.net/m1erickson/zYsQh/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasMouseX;
var canvasMouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var storedLines=[];
ctx.strokeStyle="orange";
ctx.font = '12px Arial';
$("#canvas").mousedown(function(e){handleMouseDown(e);});
function handleMouseDown(e){
canvasMouseX=parseInt(e.clientX-offsetX);
canvasMouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
storedLines.push({x:canvasMouseX,y:canvasMouseY});
var count=storedLines.length;
var X=canvasMouseX-(count<10?4:7);
ctx.strokeStyle="orange";
ctx.fillStyle="black";
ctx.lineWidth=1;
ctx.beginPath();
ctx.arc(canvasMouseX, canvasMouseY, 8, 0 , 2 * Math.PI, false);
ctx.fillText(storedLines.length, X, canvasMouseY+4);
ctx.stroke();
}
$("#draw").click(function(){
ctx.strokeStyle="red";
ctx.fillStyle="blue";
ctx.lineWidth=3;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(storedLines[0].x,storedLines[0].y);
for(var i=0;i<storedLines.length;i++){
ctx.lineTo(storedLines[i].x,storedLines[i].y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
storedLines=[];
});
$("#clear").click(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
storedLines=[];
});
}); // end $(function(){});
</script>
</head>
<body>
<p>Click to create storedLines[]</p>
<p>Then press the Draw button to fill the path</p><br/>
<canvas id="canvas" width=300 height=300></canvas><br/>
<button id="clear">Clear Canvas</button>
<button id="draw">Draw</button>
</body>
</html>
解決方案2
1 2013-03-20 07:37:43
如果你的storedLines數組包含其中所有值的精確副本，那么你已經繪制了一個形狀，否則你還沒有......
例：
您通過繪制三條線來繪制三角形
第1行 - （0,0）到（10,0）
第2行 - （10,0）到（5,10）
- 第3行 - （5,10）到（0,0）
所以，所有點都有它的副本。
為什么我的 for 循環沒有在 html canvas 草圖中繪制多個重復的形狀？
[英]Why my for loop is not drawing multiple repeated shapes in the html canvas sketch?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.