Javascript 如何在HTML5画布上绘制平滑的曲线？
我正在构建一个HTML5应用程序，使用画布进行绘制，但我在尝试绘制平滑曲线时遇到了困难 我正在我的应用程序中使用Javascript 如何在HTML5画布上绘制平滑的曲线？,javascript,html,canvas,Javascript,Html,Canvas,我正在构建一个HTML5应用程序，使用画布进行绘制，但我在尝试绘制平滑曲线时遇到了困难 我正在我的应用程序中使用moveTo（），它使用一种模式进行绘制和擦除。如何更改代码以获得平滑曲线？这是我的代码： <!doctype html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <
moveTo（）<!doctype html>
<html>
<head>
<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>
canvas{background:url(images/note.png)}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var lastX;
var lastY;
var strokeColor="green";
var strokeWidth=2;
var mouseX;
var mouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
var image = new Image();
image.src = "https://lh5.googleusercontent.com/-Ks_Ti3x- QdU/UwvFTB_RqaI/AAAAAAAAANk/dOSa3yoTdX8/w140-h140-p/IMG_0478.JPG";
image.onload = function() {
ctx.drawImage(image, 100, 100);
};
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
lastX=mouseX;
lastY=mouseY;
isMouseDown=true;
}
function handleMouseUp(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isMouseDown=false;
}
function handleMouseOut(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseOut stuff here
isMouseDown=false;
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(isMouseDown){
ctx.beginPath();
if(mode=="pen_black"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.strokeStyle="#000000";
}
if(mode=="pen_blue"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.strokeStyle="#0000ff";
//ctx.lineWidth = 15;
}
if(mode=="pen_green"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.strokeStyle="#00FF00";
//ctx.lineWidth = 15;
} if(mode=="pen_orange"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.strokeStyle="#FF7F00";
//ctx.lineWidth = 15;
}
if(mode=="pen_white"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.strokeStyle="#FFFFFF";
//ctx.lineWidth = 15;
}
if(mode=="pen_red"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.strokeStyle="#FF0000";
//ctx.lineWidth = 15;
}
if(mode=="size1"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.lineWidth = 15;
ctx.lineJoin = 'round';
}
if(mode=="size2"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
}
if(mode=="size3"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
ctx.lineCap = 'round';
ctx.lineWidth = 7;
ctx.lineJoin = 'round';
}
if(mode=="eraser"){
ctx.globalCompositeOperation="destination-out";
ctx.arc(lastX,lastY,5,0,Math.PI*2,false);
ctx.lineWidth = 10;
ctx.fill();
}
lastX=mouseX;
lastY=mouseY;
}
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
var mode="pen_black";
$("#pen_black").click(function(){ mode="pen_black"; });
$("#pen_blue").click(function(){ mode="pen_blue"; });
$("#eraser").click(function(){ mode="eraser"; });
$("#size1").click(function(){ mode="size1"; });
$("#size2").click(function(){ mode="size2"; });
$("#size3").click(function(){ mode="size3"; });
$("#pen_green").click(function(){ mode="pen_green"; });
$("#pen_orange").click(function(){ mode="pen_orange"; });
$("#pen_white").click(function(){ mode="pen_white"; });
$("#pen_red").click(function(){ mode="pen_red"; });
}); // end $(function(){});
function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}
</script>
</head>
<body>
<canvas id="canvas" width=614 height=620></canvas></br>
<img id="canvasimg" style="position:absolute;top:1%;left:50%;background:url(images/note.png);" style="display:none;"></img>
<button id="pen_black">Black</button>
<button id="pen_blue">Blue</button>
<button id="pen_orange">Orange</button>
<button id="pen_green">Green</button>
<button id="pen_red">Red</button>
<button id="pen_white">White</button>
<button id="size1">Size 15</button>
<button id="size2">Size 10</button>
<button id="size3">size 7</button>
<button id="eraser">Eraser</button>
<input type="button" value="save" id="save" size="30" onclick="save()" style="position:absolute;top:80%;left:5%;">
<input type="button" value="clear" size="30" onclick="history.go()" style="position:absolute;top:85%;left:5%;">
</body>
</html>
画布{背景：url（images/note.png）}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var lastX；
血管成形术；
var strokeColor=“绿色”；
var strokeWidth=2；
var mouseX；
var mouseY；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isMouseDown=错误；
var image=新图像（）；
image.src=”https://lh5.googleusercontent.com/-Ks_Ti3x- QdU/UwvFTB_RqaI/AAAAA NK/dOSa3yoTdX8/w140-h140-p/IMG_0478.JPG”；
image.onload=函数（）{
ctx.drawImage（图像，100100）；
};
功能手柄向下（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的鼠标下的东西放在这里
lastX=鼠标；
拉蒂=老鼠；
isMouseDown=真；
}
功能handleMouseUp（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的鼠标放在这里
isMouseDown=错误；
}
函数handleMouseOut（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的老鼠屎放在这里
isMouseDown=错误；
}
功能手柄移动（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的mousemove放在这里
如果（isMouseDown）{
ctx.beginPath（）；
如果（模式==“黑色笔”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.strokeStyle=“#000000”；
}
如果（模式==“蓝色笔”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.strokeStyle=“#0000ff”；
//ctx.lineWidth=15；
}
如果（模式==“绿色笔”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.strokeStyle=“#00FF00”；
//ctx.lineWidth=15；
}如果（模式==“橙色笔”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.strokeStyle=“#FF7F00”；
//ctx.lineWidth=15；
}
如果（模式==“白色笔”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.strokeStyle=“#FFFFFF”；
//ctx.lineWidth=15；
}
如果（模式=“笔红色”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.strokeStyle=“#FF0000”；
//ctx.lineWidth=15；
}
如果（模式==“尺寸1”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.lineWidth=15；
ctx.lineJoin='round'；
}
如果（模式==“尺寸2”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.线宽=10；
ctx.lineJoin='round'；
}
如果（模式==“尺寸3”）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
ctx.lineCap='圆形'；
ctx.lineWidth=7；
ctx.lineJoin='round'；
}
如果（模式==“橡皮擦”）{
ctx.globalCompositeOperation=“目的地输出”；
ctx.arc（lastX，lastY，5,0，数学PI*2，假）；
ctx.线宽=10；
ctx.fill（）；
}
lastX=鼠标；
拉蒂=老鼠；
}
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseOut（e）；}）；
var mode=“黑色笔”；
$（“#黑色笔”）。单击（function（）{mode=“黑色笔”；}）；
$（“#蓝色笔”）。单击（function（）{mode=“蓝色笔”；}）；
$（“#橡皮擦”）。单击（function（）{mode=“橡皮擦”}）；
$（“#size1”）。单击（function（）{mode=“size1”；}）；
$（“#size2”）。单击（function（）{mode=“size2”；}）；
$（“#size3”）。单击（function（）{mode=“size3”；}）；
$（“#笔绿色”）。单击（function（）{mode=“笔绿色”；}）；
$（“#pen_orange”）。单击（function（）{mode=“pen_orange”；}）；
$（“#笔白”）。单击（function（）{mode=“笔白”；}）；
$（“#笔红色”）。单击（function（）{mode=“笔红色”；}）；
}); // end$（函数（）{}）；
函数save（）{
document.getElementById（“canvasimg”）.style.border=“2px solid”；
var dataURL=canvas.toDataURL（）；
document.getElementById（“canvasimg”）.src=dataURL；
document.getElementById（“canvasimg”）.style.display=“inline”；
}
黑色
蓝色
橙色
绿色
红色
白色
15号
10号
7号
橡皮擦