39,118
社区成员




<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>canvas line</title>
<script>
window.onload = function(){
var mycanvas = document.getElementByIdx_x("mycanvas");
var context = mycanvas.getContext("2d");
context.strokeStyle='#000';
context.lineWidth=10;
context.lineCap='square';
context.beginPath();
context.moveTo(20,0);
context.lineTo(100,0);
context.stroke();
context.closePath();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="400"></canvas>
</body>
</html>
1)每个Canvas上下文仅有一个当前Path;
2)通过beginPath方法开始一个Path,closePath来结束一个Path;
3)Path有两个基本的方法:moveTo(),lineTo();
4)lineCap有三个属性:
butt(默认)边缘是平的,与当前线条垂直
round:边缘是半圆,该半圆的直径是当前线条的长度;
square:边缘是长方形,该长方形的长是当前线条的宽度,宽是当前线条宽度的一半;
5)lineWidth属性用来设置线条的宽度;
6)strokeStyle 属性定义当前线条的颜色及样式