<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas匀速直线运动</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid #ddd;
margin: 10px;
}
</style>
</head>
<body>
<canvas id="canvas">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
<script>
var t = ""; //循环定时器
var inputval = "请输入文本啊66";
var boxheight = ""; //要运动物体高度的高度
var cwidth = "";
var cheight = "";
var startPoint = "" //运动距离
window.onload = function() {
var canvas = document.getElementById('canvas');
cwidth = canvas.width = 375;
cheight = canvas.height = 590;
var context = canvas.getContext('2d'); //获得画笔
context.translate(canvas.width / 2, 0)//移动位置
context.rotate(Math.PI / 2);//旋转角度-180°~180°
context.font = "bold 40px '字体','字体','微软雅黑','宋体'"; //设置字体（）
context.textBaseline = 'middle'; //在绘制文本时使用的当前文本基线
context.fillText(inputval, canvas.height, '0'); //文字及位置(context.font要先设置)
startPoint = canvas.height;
boxheight = context.measureText(inputval).width//获取文本水平排列时的宽度
t = setInterval(function() {
run(context);
}, 15);
};
function run(cxt) {
var speed = -1; //每次移动的单位距离
var clearcwidth = cwidth / 2
cxt.clearRect(0, -clearcwidth, cheight, cwidth); //清除画布
startPoint += speed;
cxt.beginPath();
cxt.fillStyle = '#000'; //设置笔触的颜色
cxt.font = "bold 40px '字体','字体','微软雅黑','宋体'"; //设置字体（）
console.log(startPoint);
console.log(boxheight);
if(startPoint <= -boxheight) {
startPoint = cheight
}
cxt.fillText(inputval, startPoint, '0'); //文字及位置(context.font要先设置)
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<me
阅读背景：
canvas弹幕方式从下往上~匀速直线运动~初版
来源：互联网
分享到：
