Javascript HTML5画布，带手绘线条_Javascript_Html_Canvas_Html5 Canvas

Javascript HTML5画布，带手绘线条

javascript html canvas html5-canvas

Javascript HTML5画布，带手绘线条,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我是HTML5画布的新手，目前正在尝试为孩子们制作一个简单的画线项目。我将背景图像插入画布，并尝试提出一种徒手画线的方法，但没有结果。有人能帮我修复下面的代码吗？谢谢大家 <!DOCTYPE HTML> <html> <script type="text/javascript"> var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY

我是HTML5画布的新手，目前正在尝试为孩子们制作一个简单的画线项目。我将背景图像插入画布，并尝试提出一种徒手画线的方法，但没有结果。有人能帮我修复下面的代码吗？谢谢大家

<!DOCTYPE HTML>
<html>
    <script type="text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;

    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }

    function color(obj) {
        switch (obj.id) {
            case "green":
                x = "green";
                break;
            case "blue":
                x = "blue";
                break;
            case "red":
                x = "red";
                break;
            case "yellow":
                x = "yellow";
                break;
            case "orange":
                x = "orange";
                break;
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        if (x == "white") y = 14;
        else y = 2;

    }

    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() {
        var m = confirm("Want to clear");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }

    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
    </script>
    <body onload="init()" style="background-image: src=c:/WebProgram/Pictures/test1.png;">
        <canvas id="can" width="520" height="700" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
        <div style="position:absolute;top:12%;left:43%;">Choose Color</div>
        <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
        <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
        <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
        <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
        <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
        <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
        <div style="position:absolute;top:20%;left:43%;">Eraser</div>
        <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
        <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
        <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:5%;left:10%;">
        <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:5%;left:15%;">
    </body>
</html>


变量画布，ctx，标志=false，
prevX=0，
currX=0，
prevY=0，
咖喱=0，
dot_标志=假；
var x=“黑色”，
y=2；
函数init（）{
canvas=document.getElementById（'can'）；
ctx=canvas.getContext（“2d”）；
w=画布宽度；
h=画布高度；
canvas.addEventListener（“mousemove”，函数（e）{
findxy（'move'，e）
}，假）；
canvas.addEventListener（“鼠标向下”，函数（e）{
findxy（'down'，e）
}，假）；
canvas.addEventListener（“mouseup”，函数（e）{
findxy（'up'，e）
}，假）；
canvas.addEventListener（“mouseout”，函数（e）{
findxy（'out'，e）
}，假）；
}
功能颜色（obj）{
开关（对象id）{
案例“绿色”：
x=“绿色”；
打破
案例“蓝色”：
x=“蓝色”；
打破
案例“红色”：
x=“红色”；
打破
案例“黄色”：
x=“黄色”；
打破
案例“橙色”：
x=“橙色”；
打破
案例“黑色”：
x=“黑色”；
打破
“白色”案例：
x=“白色”；
打破
}
如果（x=“白色”）y=14；
否则y=2；
}
函数绘图（）{
ctx.beginPath（）；
ctx.moveTo（prevX，prevY）；
ctx.lineTo（咖喱，咖喱）；
ctx.strokeStyle=x；
ctx.lineWidth=y；
ctx.stroke（）；
ctx.closePath（）；
}
函数擦除（）{
var m=确认（“想要清算”）；
如果（m）{
ctx.clearRect（0，0，w，h）；
document.getElementById（“canvasimg”）.style.display=“无”；
}
}
函数save（）{
document.getElementById（“canvasimg”）.style.border=“2px solid”；
var dataURL=canvas.toDataURL（）；
document.getElementById（“canvasimg”）.src=dataURL；
document.getElementById（“canvasimg”）.style.display=“inline”；
}
函数findxy（res，e）{
如果（res=='down'）{
prevX=currX；
prevY=咖喱；
currX=e.clientX-canvas.offsetLeft；
currY=e.clientY-canvas.offsetTop；
flag=true；
dot_flag=true；
if（dot_标志）{
ctx.beginPath（）；
ctx.fillStyle=x；
ctx.fillRect（currX，currY，2,2）；
ctx.closePath（）；
dot_标志=假；
}
}
如果（res==“向上”| res==“向外”）{
flag=false；
}
如果（res=='move'）{
国际单项体育联合会（旗）{
prevX=currX；
prevY=咖喱；
currX=e.clientX-canvas.offsetLeft；
currY=e.clientY-canvas.offsetTop；
draw（）；
}
}
}
选择颜色
橡皮擦

仔细想想，这个过程其实很简单：

首先，单击鼠标时获取鼠标点（x和y坐标）（确保仅在单击鼠标时获取这些点）
然后在点之间画线。这也应该很容易。（请记住，这些线应该只在鼠标按下时绘制，并且应该从用户按下鼠标或触摸屏幕的第一个点开始。几乎每次有输入时都应该如此）
现在保存您需要的图形
- 使用canvas'
```
toDataURL（）
```
  函数将图像转换为数据URL
- 然后使用将dataURL转换为Blob
- 使用
```
URL.createObjectURL（blob）
```
  创建指向blob的链接
- 创建一个

当然，这就是我看到你完成这个应用程序的方式

还有一件事，请阅读以下教程以了解更多信息：

好极了！希望这有帮助，很抱歉这么懒，没有给出实际代码来支持这个答案。

仔细想想，这个过程其实很简单：

首先，单击鼠标时获取鼠标点（x和y坐标）（确保仅在单击鼠标时获取这些点）
然后在点之间画线。这也应该很容易。（请记住，这些线应该只在鼠标按下时绘制，并且应该从用户按下鼠标或触摸屏幕的第一个点开始。几乎每次有输入时都应该如此）
现在保存您需要的图形
- 使用canvas'
```
toDataURL（）
```
  函数将图像转换为数据URL
- 然后使用将dataURL转换为Blob
- 使用
```
URL.createObjectURL（blob）
```
  创建指向blob的链接
- 创建一个

当然，这就是我看到你完成这个应用程序的方式

还有一件事，请阅读以下教程以了解更多信息：

好极了！希望这有帮助，很抱歉这么懒，没有给出实际代码来支持这个答案。

创建一个基于画布的绘图应用程序。绘图应用程序没有那么多功能。听鼠标，当按钮向下时，在鼠标位置画

如果你想有一个响应画布，还包括撤消和更多，那么你需要sta

function createCanvas(width, height) {
  const c = document.createElement("canvas");
  c.width = width;
  c.height = height;
  c.ctx = c.getContext("2d");
  return c;
}
const drawing = createCanvas(512,512);

ctx.drawImage(drawing,0,0);

// a point object creates point from x,y coords or object that has x,y
const point = (x, y = x.y + ((x = x.x) * 0)) => ({ x, y });

// function to add a point to the line
function addPoint(x, y) { this.points.push(point(x, y)); }

// draw a line on context ctx and adds offset.x, offset.y
function drawLine(ctx, offset) { 
  ctx.strokeStyle = this.color;
  ctx.lineWidth = this.width;
  ctx.lineJoin = "round";
  ctx.lineCap = "round";
  ctx.beginPath();
  var i = 0;
  while (i < this.points.length) {
    const p = this.points[i++];
    ctx.lineTo(p.x + offset.x, p.y + offset.y);
  }
  ctx.stroke();
}
// creates a new line object
function createLine(color, width) {
  return {
    points: [], // the points making up the line
    color,      // colour of the line
    width,      // width of the line
    add: addPoint,  // function to add a point
    draw: drawLine,  // function to draw the whole line
  };
}