网页制作 HTML5 动画 绘制一个圆,该圆左右水平移动,绘制姓名文字,该文字左右水平移动。
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5-canvas</title>
<script>
var r = 20;
var x = 250 - r;
var y = 0;
var h = 0;
var w = 3;
function draw() {
var chr = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
chr.strokeStyle = "rgba(255,0,0,1)";
chr.clearRect(0, 0, width, height);
chr.fillStyle = "#c81623";
chr.beginPath();
chr.arc(x, y, r, 0, Math.PI * 2, 1);
chr.fill();
chr.font = "30px Verdana";
var gradient = chr.createLinearGradient(0, 0, width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
chr.fillStyle = gradient;
chr.fillText("ya死性子", x - 10, y + 110);
chr.closePath();
x += w;
y += h;
x = x > width - r ? width - r : x;
x = x < r ? r : x;
y = y > height - r ? height - r : y;
y = y < r ? r : y;
if (w > 0 && x >= width - r || w < 0 && x <= r) {
w = -w;
}
if (h > 0 && y >= height - r || h < 0 && y <= r) {
h = -h;
}
}
</script>
</head>
<body>
<div style="margin:0px auto; width:500px;">
<canvas id="canvas" width="500" height="200" style="border:1px solid #c81623"></canvas>
<br />
<input onclick="clearInterval(window.interval);window.interval=setInterval(draw,5);" value="开始" type="button" />
<input onclick="clearInterval(window.interval);" value="停止" type="button" />
</div>
</body>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
