如何让用户在canvas上写字
答案:1 悬赏:50 手机版
解决时间 2021-03-11 19:19
- 提问者网友:謫仙
- 2021-03-10 23:07
如何让用户在canvas上写字
最佳答案
- 五星知识达人网友:走死在岁月里
- 2021-03-10 23:56
注:要在支持HTML5的浏览器上运行才能看到效果。
<html>
<head>
<title>write demo</title>
</head>
<body>
<canvas width="800" height="450"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
var context = canvas.getContext('2d');
var linex = new Array();
var liney = new Array();
var linen = new Array();
var lastX = -1;
var lastY = -1;
var hue = ;
var flag = ;
function onMouseMove(evt) {
if (flag == 1) {
linex.push(evt.layerX);
liney.push(evt.layerY);
linen.push(1);
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
for (var i=1;i<linex.length;i++) {
lastX = linex[i];
lastY = liney[i];
if (linen[i] == 0) {
context.moveTo(lastX,lastY);
} else {
context.lineTo(lastX,lastY);
}
}
huehue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
}
function onMouseDown(evt) {
flag = 1;
linex.push(evt.layerX);
liney.push(evt.layerY);
linen.push(0);
}
function onMouseUp(evt) {
flag = ;
linex.push(evt.layerX);
liney.push(evt.layerY);
linen.push(0);
}
</script>
</body>
</html>
<html>
<head>
<title>write demo</title>
</head>
<body>
<canvas width="800" height="450"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
var context = canvas.getContext('2d');
var linex = new Array();
var liney = new Array();
var linen = new Array();
var lastX = -1;
var lastY = -1;
var hue = ;
var flag = ;
function onMouseMove(evt) {
if (flag == 1) {
linex.push(evt.layerX);
liney.push(evt.layerY);
linen.push(1);
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
for (var i=1;i<linex.length;i++) {
lastX = linex[i];
lastY = liney[i];
if (linen[i] == 0) {
context.moveTo(lastX,lastY);
} else {
context.lineTo(lastX,lastY);
}
}
huehue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
}
function onMouseDown(evt) {
flag = 1;
linex.push(evt.layerX);
liney.push(evt.layerY);
linen.push(0);
}
function onMouseUp(evt) {
flag = ;
linex.push(evt.layerX);
liney.push(evt.layerY);
linen.push(0);
}
</script>
</body>
</html>
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯