在画布上绘制应用程序 [英] paint app in canvas
本文介绍了在画布上绘制应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在Html上的画布项目上工作，
I am working on a project on canvas in Html in which I have to :
- 让用户通过拖动绘制一个圆圈鼠标，它应该是无色的。
- 并从选项列表中填充圆圈颜色，但这应该在创建圆圈之后完成。
，现在我可以在画布上制作空的圆圈（其中没有颜色），但这有很多缺点：$ b $ b现在让我们跳过拖放部分
and now i able to make empty circles(no colors in them) in canvas but there are many faults in this: Lets skip the drag and drop part for now
问题：
- 当我将鼠标左移到是的，如果我尝试在顶部或底部创建一个圆，反之亦然，则什么也没发生
- 我能够创建一个空圆，但无法填充颜色，并且如果我正在创建一个圆并在不释放鼠标的情况下将鼠标移回到起点，它在彼此之间就像多个圆一样创建。
I我什么都没想我把我的整个代码。希望有人可以帮助我：-
I am not able to think of anything. I am putting my entire code. hope someone can help me out:-
<head>
<title></title>
<script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery.color.js"></script>
<script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery-1.11.1.min.js"></script>
<script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery.easing.1.3.js"></script>
<script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery-ui.js"></script>
<style type="text/css">
.clrPicker
{
width: 30px;
height: 30px;
border: 1px solid #808080;
margin-bottom: 5px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="tr0">
<div class="td">
Select Drawing tool : <br />
<!--<input type="radio" name="dTool" id="dToolR" value="Rectangle" /> <label for="dToolR">Rectangle</label>-->
<input type="radio" name="dTool" id="dToolC" value="Circle" /> <label for="dToolC" onclick="DrawCircle()">Circle</label>
</div>
</div>
<div id="board" style="width: 930px;">
<div>
<canvas id="kfCanvas" width="800px" height="500px;" style="border: 3px dotted #000;cursor:crosshair;">
Sorry, your browser doesn't support canvas technology.
</canvas>
<div style="float: right;">
<div>
Color picker:
<div class="clrPicker" style="background-color:black;" onclick="SetBrushColor('black')"></div>
<div class="clrPicker" style="background-color:red;" onclick="SetBrushColor('red')"></div>
<div class="clrPicker" style="background-color:blue;" onclick="SetBrushColor('blue')"></div>
<div class="clrPicker" style="background-color:green;" onclick="SetBrushColor('green')"></div>
<div class="clrPicker" style="background-color:orange;" onclick="SetBrushColor('orange')"></div>
<div class="clrPicker" style="background-color:yellow;" onclick="SetBrushColor('yellow')"></div>
</div>
</div>
</div>
<script>
var curColor = 'black';
var context;
var startX, startY;
var canvasX, canvasY;
var width, height;
var toolSelected;
var kfCanvas = document.getElementById("kfCanvas"); // jQuery doesn't work as .getContext throw error
if (kfCanvas) {
var isDown = false;
ctx = kfCanvas.getContext("2d");
DrawAWhiteBase(); // Draw a white base on the canvas
$(kfCanvas).mousedown(function (e) {
isDown = true;
startX = e.pageX - kfCanvas.offsetLeft;
startY = e.pageY - kfCanvas.offsetTop;
toolSelected = $("input[type='radio'][name='dTool']:checked");
}).mousemove(function (e) {
if (isDown != false) {
canvasX = e.pageX - kfCanvas.offsetLeft;
canvasY = e.pageY - kfCanvas.offsetTop;
width = Math.abs(canvasX - startX);
height = Math.abs(canvasY - startY);
var beginrad = startX;
var endrad = canvasX;
var radius = endrad - beginrad; //to calculate circle radius
var toolSelected = $("input[type='radio'][name='dTool']:checked");
//if (toolSelected.length > 0)
//{
//toolSelected = toolSelected.val();
//if (toolSelected == 'Circle')
//{
DrawCircle(startX, startY, radius);
//}
//}
}
}).mouseup(function (e) {
isDown = false;
ctx.closePath();
});
}
//DrawAWhiteBase is for teh canvas background
function DrawAWhiteBase() {
ctx.beginPath();
ctx.fillStyle = "white";
ctx.fillRect(0, 0, kfCanvas.width, kfCanvas.height);
ctx.closePath();
}
function DrawCircle(x, y, r) {
ctx.beginPath();
//ctx.fillStyle = curColor;
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.fill();
}
//function SetBrushColor(c) {
// //if (c == 'Text') {
// // c = $("#clrText").val();
// //}
//curColor = c;
//$("#divSelectedColor").css('background-color', curColor);
//ctx.fill();
//}
</script>
</div>
</body>
推荐答案
这是画圆的一种方法拖动：
- 鼠标下移将声明圆的中心点并开始拖动。
- moousemove设置临时圆的半径（==从鼠标到中心点的距离）并绘制未填充的圆。
- 鼠标设置圆的半径并绘制填充的圆。
示例代码和演示：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
var isDown=false;
var cx,cy,mx,my;
var PI2=Math.PI*2;
var fill='red';
ctx.lineWidth=3;
ctx.strokeStyle='gray';
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUpOut(e);});
// change fill color
$('input[type=radio][name=group1').change(function(){
fill=this.value;
});
function draw(cx,cy,mx,my,fill){
var dx=mx-cx;
var dy=my-cy;
var radius=Math.sqrt(dx*dx+dy*dy)
ctx.clearRect(0,0,cw,ch);
ctx.beginPath();
ctx.arc(cx,cy,radius,0,PI2);
ctx.closePath();
if(fill){
ctx.fillStyle=fill;
ctx.fill();
}
ctx.stroke();
if(!fill){
ctx.beginPath();
ctx.arc(cx,cy,3,0,PI2);
ctx.closePath();
ctx.fillStyle='black';
ctx.fill();
}
}
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
cx=parseInt(e.clientX-offsetX);
cy=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
isDown=true;
}
function handleMouseUpOut(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mx=parseInt(e.clientX-offsetX);
my=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isDown=false;
draw(cx,cy,mx,my,fill);
}
function handleMouseMove(e){
if(!isDown){return;}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mx=parseInt(e.clientX-offsetX);
my=parseInt(e.clientY-offsetY);
draw(cx,cy,mx,my);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag to draw circle (Circle expands from center).</h4>
<input type=radio name=group1 value='red' checked>Red
<input type=radio name=group1 value='gold'>Gold
<br><canvas id="canvas" width=300 height=300></canvas>
如果您还想显示以前的圆：
- 将每个圆保存在JS对象中：
var newCircle = {cx：10，cy：10，radius：10，fill：'gold'} - 将每个圆形对象添加到数组：
var circle = []; circle.push（newCircle）; - 并遍历数组并在
draw（）
- save each circle in a JS object:
var newCircle={cx:10,cy:10,radius:10,fill:'gold'} - add each circle-object to an array:
var circles=[]; circles.push(newCircle); - and iterate through the array and redraw every previous circle in
draw()
这篇关于在画布上绘制应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
