在画布上绘制随机曲线

你的浏览器不支持画布(Canvas).

我们可以通过新的HTML5画布（Canvas）标签添加一个画布到网页中，以下代码用于定义一个 800 x 600 大小的画布。

你的浏览器不支持画布(Canvas).
					

再通过以下 JavaScript 代码控制在画布中的绘图。

// 通过ID取画布元素
var mc = document.getElementById("MyCanvas");
var ctx = null;
var lastX = mc.width * Math.random();
var lastY = mc.height * Math.random();

if(mc.getContext)
{
	// 创建 context 对象
	ctx = mc.getContext("2d");

	// 随机绘图
	setInterval(drawLine, 50);

	// 清理
	setInterval(blank, 40);
}

function drawLine()
{
	// 保存画布状态
	ctx.save();

	// 移动坐标点到画布中心
	ctx.translate(mc.width / 2, mc.height / 2);

	// 缩放
	ctx.scale(0.9, 0.9);

	// 移回原坐标
	ctx.translate(-mc.width / 2, -mc.height / 2);

	// 开始路径
	ctx.beginPath();

	// 线条宽度
	ctx.lineWidth = 5 + Math.random() * 10;

	// 移至结束点
	ctx.moveTo(lastX, lastY);

	// 计算结束点
	lastX = mc.width * Math.random();
	lastY = mc.height * Math.random();

	// 三次曲线
	ctx.bezierCurveTo(mc.width * Math.random(), mc.height * Math.random(),
						mc.width * Math.random(),mc.height * Math.random(),
						lastX, lastY);

	// 计算线条颜色
	var r = Math.floor(Math.random() * 255) + 70;
	var g = Math.floor(Math.random() * 255) + 70;
	var b = Math.floor(Math.random() * 255) + 70;

	// 设置阴影及绘制颜色
	var s = 'rgba(' + r + ',' + g + ',' + b +', 1.0)';
	ctx.shadowColor = 'white';
	ctx.shadowBlur = 10;
	ctx.strokeStyle = s;

	// 绘制图形
	ctx.stroke();

	// 恢复画布状态
	ctx.restore();
 }

function blank()
{
	// 清理画布
	ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
	ctx.fillRect(0, 0, mc.width, mc.height);
}
					

返回目录