在画布上的线条风格

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

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

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

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

// 通过ID取画布元素
var mc = document.getElementById("MyCanvas");
if(mc.getContext)
{
	// 创建 context 对象
	var ctx = mc.getContext("2d");

	// 线条样式(默认为 butt)
	// 由图可知 butt 为 普通线条， round 在线条的两端增加半个线条宽度的半圆， square 在线条的两端增加半个线条宽度的矩形
	var lineCap = ['butt','round','square'];

	// 左上区域
	ctx.strokeStyle = "red";

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

	//上标准线
	ctx.moveTo(100, 100);
	ctx.lineTo(700, 100);

	//下标准线
	ctx.moveTo(100, 500);
	ctx.lineTo(700, 500);

	// 绘制标准线
	ctx.stroke();

	// 线条颜色
	ctx.strokeStyle = "#1EFF00";

	// 线条宽度
	ctx.lineWidth = 20;

	// 绘制不同样式的线条
	for(var i=0;i < lineCap.length;i++)
	{
		// 线条样式
		ctx.lineCap = lineCap[i];

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

		// 移动到指定点
		ctx.moveTo(200+i*200, 100);

		// 设置直线
		ctx.lineTo(200+i*200, 500);

		// 绘制线条
		ctx.stroke();
	}
}
					

返回目录