网页canvas怎么在上面写字

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页canvas怎么在上面写字相关的知识,希望对你有一定的参考价值。

参考技术A 1. [代码][html]代码
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<html>
<head>
<title>write demo</title>
</head>
<body>
<canvas width="800" height="450" style="border:1px solid black"></canvas>
<div id="info">-</div>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);

var info = document.getElementById('info');
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 = 0;
var flag = 0;

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();

info.firstChild.nodeValue ='x = ' + evt.layerX + ' y = ' + evt.layerY;

function onMouseDown(evt)
flag = 1;
linex.push(evt.layerX);
liney.push(evt.layerY);
linen.push(0);

function onMouseUp(evt)
flag = 0;
linex.push(evt.layerX);
liney.push(evt.layerY);
linen.push(0);

</script>
</body>
</html>本回答被提问者和网友采纳

关于Canvas写字

参考技术A 首先明确canvas是有一个font属性的。利用这个属性我们可以将输入的文字画到画布或者说是已有图片上。先进行最基本的:画布上写字。

图片如下:

具体的font属性可参考 http://www.w3school.com.cn/tags/canvas_font.asp

以上是关于网页canvas怎么在上面写字的主要内容,如果未能解决你的问题,请参考以下文章

关于Canvas写字

canvas绘制线条怎么改变线条长度

canvas绘制线条&canvas实现写字板功能

canvas写字

能否通过外设(手写笔、手写板等)在canvas上写字呢?

验证码生成器(在TImage.Canvas上写字,很好看)