h5中使用canvas绘制线段、多边形、圆、圆弧
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display: block;margin: 20px auto;">
当浏览器不支持canvas时显示的内容写在这里，支持时不显示
</canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
//指定canvas的大小
/*canvas.width = 1024;
canvas.height = 768;*/
if(canvas.getContext("2d")){
//使用context绘制
var context = canvas.getContext("2d");
//设置颜色的方法"#005588","rgb(100,0,0)","red"
//绘制填充多边形
context.beginPath();
context.moveTo(0,0);
context.lineTo(50,50);
context.lineTo(0,50);
context.lineTo(0,0);
context.closePath();
context.fillStyle = "rgb(255,0,0)";//设置填充颜色,不设置不填充
context.fill();//执行填充绘制
context.beginPath();
context.moveTo(0,0);
context.lineTo(50,50);
context.closePath();
//绘制边框
context.lineWidth = 5;//设置边框线宽
context.strokeStyle = "#005588";//设置边框颜色
context.stroke();//执行边框绘制
//绘制线段
context.beginPath();
context.moveTo(10,0);
context.lineTo(60,50);
context.closePath();
context.strokeStyle = "black";
context.stroke();
//绘制圆弧
context.beginPath();//重新规划路径
//arc参数x,y,radius,begindegree,enddegree,最后一个参数确定绘制方向，false为顺时针（默认false），true为逆时针
context.arc(25,75,25,0,0.5*Math.PI);
//closePath会自动将不封闭的首尾线段连接起来
context.closePath();//结束并封闭路径
context.lineWidth = 2;//圆弧宽
context.strokeStyle = "red";//圆弧颜色
context.stroke();
//绘制填充圆
context.beginPath();
context.arc(25,125,25,0,1.5*Math.PI);
context.strokeStyle = "rgb(0,100,0)";//圆弧填充颜色
context.fill();
}else{
alert("if判断当前浏览器是否支持canvas");
}
}
</script>
</body>
</html>运行效果
转载自：https://blog.csdn.net/yuxing55555/article/details/72026914
