[英]Appending a Canvas Element to DOM
我试图在这里使用appendChild
调用画布并制作一个类似MS Paint的程序,在这里我试图用鼠标“绘制”。
我试图将其高度/宽度更改为仅500x500,并出现在div之间,我也需要在div中调用它。
我似乎无法理解为什么它无法正常工作。
有人可以帮忙吗?
var canvas = document.getElementById('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
document.body.style.margin = 0;
canvas.style.position = 'fixed';
resize();
var pos = { x: 0, y: 0 };
canvas.addEventListener('resize', resize);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', setPosition);
canvas.addEventListener('mouseenter', setPosition);
//what would be the new positions from the "mouse" event.
function setPosition(e)
{
pos.x = e.clientX;
pos.y = e.clientY;
}
function resize()
{
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function draw(e)
{
if (e.buttons! ==1) return;
ctx.beginPath();
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'red';
ctx.moveTo(pos.x, pos.y);
setPosition(e);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
}
尝试像这样使用。
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
document.getElementById('idName')
用于选择现有元素。 它不会创建一个新的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.