织梦CMS - 轻松建站从此开始!

沙龙国际_沙龙国际网上娱乐_沙龙网上娱乐

当前位置: 主页 > 沙龙国际娱乐网站 >

Canvas中如何用鼠标绘制出多条直线?

时间:2017-07-17 22:18来源:未知 作者:admin 点击:
var canvas = document.getElementById('canvas')var ctx = canvas.getContext('2d')var moveX, moveY, toX, toYcanvas.addEventListener('mousedown', function (e) { moveX = e.clientX moveY = e.clientY canvas.addEventListener('mousemove', drawLine)}
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

var moveX,
    moveY,
    toX,
    toY

canvas.addEventListener('mousedown', function (e) {
    moveX = e.clientX
    moveY = e.clientY
    canvas.addEventListener('mousemove', drawLine)
})
canvas.addEventListener('mouseup', function (e) {
    canvas.removeEventListener('mousemove', drawLine)
})

function drawLine(e) {
    toX = e.clientX
    toY = e.clientY
    ctx.clearRect(0, 0, 600, 400)
    ctx.beginPath()
    ctx.moveTo(moveX, moveY)
    ctx.lineTo(toX, toY)
    ctx.closePath()
    ctx.stroke()
}

以上代码可以用鼠标绘制一条直线(鼠标按下,开始绘制,鼠标移动时,显示绘制路径,鼠标抬起,结束绘制),但是这样只能绘制一条(因为代码中加入了clearRect,但是不加的话,会显示所有绘制路径),怎么能在绘制下一条的时候不擦除之前绘制的线条呢?

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容