在画布上的线条连接样式

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

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

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

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

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

	// 线条连接样式(默认为 miter)
	var lineJoin = ['round','bevel','miter'];

	// 左上区域
	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 < lineJoin.length;i++)
	{
		// 线条样式
		ctx.lineJoin = lineJoin[i];

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

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

		// 设置直线
		ctx.lineTo(300, 250+i*100);
		ctx.lineTo(400, 150+i*100);
		ctx.lineTo(500, 250+i*100);
		ctx.lineTo(600, 150+i*100);

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

返回目录