<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>starGirl</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style> </head> <body> <div> <canvas id = "canvas" width = "800px" height = "600px"></canvas> </div> <script type = "text/javascript" >
window.οnlοad=function(){
var canvas = document.getElementById('canvas');
//设置高宽，不建议在css里面设置，因为会不准确
canvas.height=500;
canvas.width=800;
var context = canvas.getContext('2d');
/*
lineJoin 属性：见效果
context.lineJoin='miter';
context.lineJoin='round';
context.lineJoin='bevel';
*/
context.lineWidth = 20;
context.beginPath();
context.moveTo(10,20);
context.lineTo(10,400);
context.lineTo(90,20);
context.lineCap='butt'; //默认
context.lineJoin='miter'; //默认
context.strokeStyle="red";
context.stroke();
context.beginPath();
context.moveTo(120,20);
context.lineTo(120,400);
context.lineTo(200,20);
context.lineJoin='round';
context.strokeStyle="yellow";
context.stroke();
context.beginPath();
context.moveTo(220,20);
context.lineTo(220,400);
context.lineTo(320,20);
context.lineJoin='bevel';
context.strokeStyle="green";
context.stroke();
/*
miterLimit 属性：默认值是10,
下面的方法，因为线与线之间的角度太少，context.lineJoin='miter'会失效
解决方法：context.miterLimit=20或者更大
*/
context.beginPath();
context.moveTo(340,20);
context.lineTo(340,400);
context.lineTo(400,20);
//context.miterLimit=10;默认值
context.miterLimit=20;//
context.lineJoin='miter';
context.strokeStyle="green";
context.stroke();
}
</script> </body> </html>
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
