<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>canvas-圆形</title> <style> #canvas{ border: 1px solid palevioletred; } </style> <script> window.onload = function (){ //获取到canvas元素 var canvas = document.getElementById('canvas'); //获取canvas中的画图环境 var context = canvas.getContext('2d'); //开启新的一条路径 context.beginPath(); //绘制圆形 //context.arc(X坐标,Y坐标,半径,起始位置（弧度制）,结束位置（弧度制）,画法顺序（true:逆时针/false:顺时针）); context.arc(100,100,50,0,Math.PI*2/3,false); //描边 context.stroke(); //开启新的一条路径 context.beginPath(); //context.arc(X坐标,Y坐标,半径,起始位置（弧度制）,结束位置（弧度制）,画法顺序（true:逆时针/false:顺时针）); context.arc(300,100,50,0,Math.PI*2/3,true); //描边 context.stroke(); //开启新的一条路径 context.beginPath(); //绘制圆形 //context.arc(X坐标,Y坐标,半径,起始位置（弧度制）,结束位置（弧度制）,画法顺序（true:逆时针/false:顺时针）); context.arc(100,300,50,0,Math.PI*2/3,false); //路径闭合方法 context.closePath(); //描边 context.stroke(); //开启新的一条路径 context.beginPath(); //context.arc(X坐标,Y坐标,半径,起始位置（弧度制）,结束位置（弧度制）,画法顺序（true:逆时针/false:顺时针）); context.arc(300,300,50,0,Math.PI*2/3,true); //设置边框的像素 context.lineWidth = 10; //设置边框的属性 context.strokeStyle = "blue"; //绘制边框 context.stroke(); //设置填充属性 context.fillStyle="red"; //填充 context.fill(); } </script></head><body> <canvas id="canvas" width="500px" height="500px"> </canvas></body></html>
新闻热点
疑难解答
