<!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>
分享到：
相关推荐
HTML5 Canvas是现代网页开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，提供了丰富的绘图API，使得创建交互式图形和动画成为可能。在这个“HTML5 Canvas圆形爱心点赞按钮冒泡动画特效”中，我们主要...
总的来说，"html5 canvas玻璃上雨滴动画特效"是一个综合运用Canvas API、动画原理和视觉设计的实例，它展示了HTML5在网页交互和视觉创新方面的潜力。通过学习和实践此类项目，开发者可以提高自己的前端技能，并为...
HTML5 Canvas是一个强大的Web绘图接口，允许开发者在网页上直接进行图形绘制，创造出丰富的动态视觉效果。在"HTML5 Canvas绘制漂亮的樱花树背景特效.zip"这个资源中，我们可以找到一个利用HTML5 Canvas技术和相关...
HTML5 Canvas是一个强大的Web绘图接口，允许开发者在网页上绘制图形、动画，甚至实现复杂的交互功能。这个压缩包中的源码示例是利用HTML5 Canvas来创建一个鼠标交互式的柳絮树枝动画特效。下面我们将深入探讨这个...
- **HTML5、CSS3 和 JavaScript 的综合运用**：此表白网页运用了HTML5作为基本结构框架，CSS3进行网页的美化与布局调整，并利用JavaScript实现了动态效果，如烟花动画等。 - **个性化定制**：用户可以根据自己的喜好...
在前端开发领域，Canvas是HTML5的一个重要特性，它为网页提供了在浏览器中进行图形绘制的能力，让开发者可以通过...记得多动手实践，理论结合实战，才能更好地理解和运用Canvas。祝你在前端开发的道路上一帆风顺！
HTML5 Canvas是一个强大的Web图形API，它允许开发者在网页上进行动态、交互式的2D和3D绘图。这个API是HTML5标准的一部分，通过JavaScript...通过掌握和熟练运用Canvas，你可以构建出引人入胜的Web应用程序和视觉体验。
在HTML5中，Canvas元素提供了一个强大的图形绘制接口，允许开发者使用JavaScript动态创建和修改二维图形。本项目"canvas绘制可爱的鬼魂幽灵动画特效.zip"正是利用这一特性，通过JavaScript实现了一种有趣的视觉效果...
在“InMemoryOfGoose”项目中，开发者运用Canvas技术，将战斗机的俯视图以动态的形式展示出来，为用户带来独特的视觉体验。 1. **Canvas基本结构**： HTML5中的Canvas元素以`<canvas>`标签定义，通过`id`属性标识...
HTML5不仅简化了语法，还引入了许多新的标签和技术，使得Web开发变得更加高效且具有更强的交互性。 #### 二、HTML5新增标签 ##### 1. 新标签 - **`<article>`**：用于表示文档或页面中的独立部分。 - **`...
理解SWF、HTML5 Canvas、AIR等不同输出格式的特点和用途。 通过《Flash 快速入门》这本书，你可以逐步掌握Flash的基础知识，为创作出富有创意和互动性的数字内容打下坚实的基础。无论你是想成为一名网页设计师，...
通过在canvas上绘制多层半透明的圆形或椭圆形，并随着时间改变它们的位置和大小，可以模拟出水波扩散的效果。同时，CSS3的transition和animation属性可以用来平滑地过渡这些变化，使效果更加流畅。 此外，为了优化...
5. **SVG与HTML的整合**：在HTML中嵌入SVG，使用内联SVG或img标签，以及object和iframe元素的使用场景。 6. **SVG优化技巧**：如何减少文件大小，提高性能，包括合并路径、删除不必要的属性和元素等。 7. **SVG在...
在JavaScript的2D图形库如HTML5的Canvas API中，`radius`是一个关键属性，用于定义圆的大小。当你创建一个`Circle`对象或者使用`arc()`函数绘制圆弧时，半径参数就是决定圆心到边缘距离的关键值。例如，以下代码会...