javascript写字技巧_javascript实现的白板效果(可以直接在网页上写字)

var ball;

var mouseX = 100;

var mouseY = 100;

var angle = 0;

var radius = 0;

function draw(){

ball = document.createElement("span");

ball.style.position = "absolute";

ball.style.color = "#FF0000";

ball.style.zIndex = 999999999;

ball.innerHTML = "●";

document.body.appendChild(ball);

ball.style["left"] = mouseX+ "px";

ball.style["top"] = mouseY+ "px";

}

function MousePos(e)

{

e = e || window.event;

var x,y;

if(!document.all){

x = e.pageX;

y = e.pageY;

}

else{

x = event.clientX + document.documentElement.scrollLeft;

y = event.clientY + document.documentElement.scrollTop;

}

return {x:x,y:y};

}

function setXY(e)

{

e = e || window.event;

var pos = MousePos(e);

mouseX = pos.x;

mouseY = pos.y;

draw();

}

window.onload = function(){

document.documentElement.onmousemove = function(e){

e = e || window.event;

setXY(e);

};

}

效果演示代码:

http://www.cnblogs.com/airy

可以使用HTML5中的Canvas元素和JavaScript实现写字动画效果。具体实现步骤如下: 1. 创建一个Canvas元素,并设置它的宽度和高度。 2. 使用JavaScript获取Canvas的上下文对象。 3. 设置字体、颜色、阴影等样式属性。 4. 使用Canvas的beginPath()方法开始绘制路径。 5. 使用Canvas的moveTo()和lineTo()方法绘制字母路径。 6. 使用Canvas的stroke()方法绘制路径。 7. 使用JavaScript的定时器函数setInterval()不断更新字母的位置,从而实现动画效果。 下面是一个简单的示例代码: HTML代码: ```html <canvas id="myCanvas" width="500" height="200"></canvas> ``` JavaScript代码: ```javascript // 获取Canvas元素的上下文对象 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 设置字体属性 ctx.font = "80px Arial"; ctx.fillStyle = "red"; ctx.shadowColor = "black"; ctx.shadowBlur = 10; // 定义字母路径 ctx.beginPath(); ctx.moveTo(50, 100); ctx.lineTo(100, 50); ctx.lineTo(150, 100); ctx.lineTo(200, 50); ctx.lineTo(250, 100); ctx.lineTo(250, 150); ctx.stroke(); // 定义定时器函数来更新字母位置 var x = 50; var y = 100; var dx = 5; var dy = -5; setInterval(function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x+50, y-50); ctx.lineTo(x+100, y); ctx.lineTo(x+150, y-50); ctx.lineTo(x+200, y); ctx.lineTo(x+200, y+50); ctx.stroke(); x += dx; y += dy; if (x > canvas.width-200 || x < 0) { dx = -dx; } if (y > canvas.height-50 || y < 0) { dy = -dy; } }, 10); ``` 这段代码实现了一个不断移动的字母路径,可以根据需要修改字母的形状和动画效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值