Html5画布的详细介绍

//线条宽度

context.lineWidth = 10;

//线条颜色（支持颜色编码与rgb()函数）

context.strokeStyle = "#cd2828";

context.strokeStyle = "rgb(205,40,40)";

context.moveTo(50, 50);

context.lineTo(150, 150);

context.stroke();

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

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

//线条宽度

context.lineWidth = 10;

//线条颜色

context.strokeStyle = "#cd2828";

//第一条直线,默认方头

context.moveTo(50, 50);

context.lineTo(250, 50);

context.stroke();

//第二条直线,使用圆头

context.beginPath();

context.moveTo(50, 100);

context.lineTo(250, 100);

context.lineCap = "round";

context.stroke();

//第三条直线,使用加长方头

context.beginPath();

context.moveTo(50, 150);

context.lineTo(250, 150);

context.lineCap = "square";

context.stroke();