linecap方法html,lineCap.html

canvas 绘制线条的帽子lineCap

你的浏览器居然不支持Canvas?

window.onload = function() {

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.lineWidth = 50;

context.strokeStyle = "#1BAAAA";

context.beginPath();

context.moveTo(100, 100);

context.lineTo(700, 100);

context.lineCap = "butt";

context.stroke();

context.beginPath();

context.moveTo(100, 300);

context.lineTo(700, 300);

context.lineCap = "round";

context.stroke();

context.beginPath();

context.moveTo(100, 500);

context.lineTo(700, 500);

context.lineCap = "square";

context.stroke();

//下面画两个基准线方便观察

context.lineWidth = 3;

context.strokeStyle = "black";

context.beginPath();

context.moveTo(100, 0);

context.lineTo(100, 600);

context.moveTo(700, 0);

context.lineTo(700, 600);

context.stroke();

}

function drawBlackRect(cxt, x, y, width, height) {

cxt.beginPath();

cxt.rect(x, y, width, height);

cxt.closePath();

cxt.lineWidth = 5;

cxt.strokeStyle = "black";

cxt.stroke();

}

function drawWhiteRect(cxt, x, y, width, height) {

cxt.beginPath();

cxt.rect(x, y, width, height);

cxt.closePath();

cxt.lineWith = 5;

cxt.strokeStyle = "white";

cxt.stroke();

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史