HTML5运用canvas标签画椭圆
<!doctypehtml>
<html>
<head>
<title>画出一个椭圆</title>
</head>
<body>
<!--画出我的画布-->
<canvasid="can1"width="500px"height="500px"style="border:1pxsolid
black"></canvas>
<scripttype="text/javascript">
//获取画布
varcanvas=document.getElementById("can1");
//获取画笔
varcxt=canvas.getContext("2d");
cxt.beginPath();
//设置填充颜色
cxt.fillstyle="red";
vara=120;
varb=160;
varx=250;
vary=250;
//选择a、b中的较大者作为arc方法的半径参数
varr=(a>b)?a:b;
varratioX=a/r;//横轴缩放比率
varratioY=b/r;//纵轴缩放比率
cxt.scale(ratioX,ratioY);//进行缩放(均匀压缩)
//从椭圆的左端点开始逆时针绘制
cxt.moveTo((x+a)/ratioX,y/ratioY);
cxt.arc(x/ratioX,y/ratioY,r,0,2*Math.PI);
cxt.fill();
cxt.closePath();
</script>
</body>
</html>
相关推荐
nercon 2020-03-06
zsh 2020-03-01
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06