<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wrapper{
margin: 0 auto;
width: 600px;
height: 400px;
border: solid magenta 1px;
}
</style>
</head>
<body>
<div id="wrapper">
<canvas id="cas" width="600" height="400"></canvas>
</div>
<script type="text/javascript">
//拿到画布
var canvas=document.getElementById('cas');
//拿到画笔
var pen = canvas.getContext('2d');
//笔的颜色
pen.strokeStyle="#DC143C";
//画笔起始点
pen.moveTo(0, 0);
//画向何处 划线
pen.lineTo(200,400);
pen.lineTo(400,0);
pen.lineTo(600,400);
//笔的粗细
pen.lineWidth='2';
//设置端点
pen.lineCap="round" //圆形端点
pen.stroke(); //空心
// pen.fill();//实心
//pen.beginPath()//拿起画笔
//pen.closePath()//闭合画笔
//画矩形
pen.strokeRect(50,50,200,300);
//画圆
// pen.arc(x,y,r,开始角,结束角,方向)
pen.arc(200,200,100,0,2*Math.PI);
</script>
</body>
</html>
哔哩哔哩公司福利 326人发布
