canvas One(http://www.jianshu.com/p/abf9eeadfa35)画完线以后，接下来画一个三角形。
- 值得注意的问题：
canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
画一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: #000;
}
canvas{
background:#fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
var oC = document.getElementById("canvas1");
var gd = oC.getContext("2d");//2d的，当然也可以是3d的，用WebGl可以实现
//以下主要画了一个三角形
gd.strokeStyle = "#f00";//设置线的颜色，默认为黑色
gd.fillStyle = 'rgba(255,255,0,0.5)';//填充颜色，默认为黑色，设置填充以后，lineWidth只能看到10
gd.lineWidth = 20;//设置线的宽度
gd.moveTo(200,260);
gd.lineTo(320,400);
gd.lineTo(270,180);
//gd.lineTo(200,260);//方法一：手动闭合
gd.closePath();//方法二：自动闭合
gd.stroke();
gd.fill();
},false);
</script>
</head>
<body>
<canvas id="canvas1" width="600" height="500">
浏览器需要更新！！！
</canvas>
</body>
</html>
效果图：
Paste_Image.png
1、gd.stroke();和gd.fill();必须得有一个，不然图形无法显示，stroke()在画布上绘制确切的路径, fill()方法来填充图像（默认是黑色）。
2、gd.closePath();主要是用来自动闭合图形，没有它，图形只是一个折线。
3、lineWidth是20的时候，其实是中线左右各10，在效果图中就可以看出，填充半透明背景以后，背景遮住了边框的一半，实际显示边框只有10。
gd.lineJoin =>当两条线条交汇时，创建边角样式
Paste_Image.png
gd.lineJoin = 'bevel';
Paste_Image.png
gd.lineJoin = 'round'
Paste_Image.png
gd.lineJoin = 'round'默认效果图如图一，为尖角。
网友评论