<!doctype html>
<html>
<head>
<title>画出一个椭圆</title>
</head>
<body>
<!-- 画出我的画布 -->
<canvas id="can1" width="500px" height="500px" style="border:1px solid
black"></canvas>
<script type="text/javascript">
//获取画布
var canvas = document.getElementById("can1");
//获取画笔
var cxt = canvas.getContext("2d");
cxt.beginPath();
//设置填充颜色
cxt.fillStyle = "red";
var a=120;
var b=160;
var x=250;
var y=250;
//选择a、b中的较大者作为arc方法的半径参数
var r = (a > b) ? a : b;
var ratioX = a / r; //横轴缩放比率
var ratioY = 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>
分享到:
相关推荐
让IE兼容 HTML5的canvas标签 excanvas的文件
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
之前我们为大家分享过很多关于火焰的HTML5动画,像这个HTML5 Canvas火焰文字动画特效和这个HTML5动感的火焰燃烧动画特效就非常炫酷。这次我们要介绍的这款基于HTML5 Canvas火焰动画非常特别,它是带火焰动画的画笔,...
个人博客程序中经常会使用的一个功能叫标签云,就是把许多标签文字...今天要分享的就是一款基于HTML5 Canvas的3D球形标签云动画,你可以定义任意的文字,然后调用HTML5代码初始化一个3D的球形标签云,效果非常不错。
jquery html5 canvas翻滚熔岩动画背景特效 jqueryhtml5 canvas翻滚熔岩动画背景特效
8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画
html5 canvas填色画游戏代码是一款适合儿童玩的益智类填色游戏,通过选中色块,来给模型填充颜色。支持多种模型选择填色效果。
Html5 canvas制作的赛车游戏动画,请注意是动画,没有交互等功能
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款...
这是一款创意十足的html5 canvas粒子动画进度条加载特效,线条边框风格百分比进度条加载动画代码。
HTML5 Canvas炫酷3D背景动画代码.
html5 canvas画布绘制圆形时钟代码
HTML5 使用canvas画布做小球回弹动画,使绘画出来的小球沿着矩形的轨迹进行对称回弹,代码简单易懂,适合初学者练习。
HTML5 Canvas核心技术 图形、动画与游戏开发
h5 canvas移动端画板
这是一款基于HTML5 Canvas的放射线动画,实现这款动画的思路也比较简单,先是根据数学图形公式构造放射线绘制的路径,然后利用HTML5将射线绘制在Canvas上,并在射线上绘制随机的颜色,这样整个射线图形看上去...
我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧...
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。