蜗小牛
- 浏览: 63534 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
<!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>
<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>
分享到：
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1265<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 620CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1048script代码： <script type=" ... -
html之marquee详解
2014-03-28 10:07 647该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 19131。html中a标签的四个属性书写是有顺序的，如果顺序不对，显 ... -
修改360浏览器内核
2014-03-10 17:19 1947浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 771有时候，为了网页设计的美观，需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1229<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 660对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1939开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 595进行网页设计时，由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 958<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 578■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得 ... -
顶部浮动
2013-11-29 09:37 449<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 551很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现 ... -
转 CSS hack：针对IE6，IE7，firefox显示不同效果
2013-09-05 13:55 1006CSS hack：针对IE6，IE7，firefox显示不同效 ... -
white-space:
2013-08-30 10:57 514定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1238{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 610<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 785所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同 ...
相关推荐
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()`函数绘制圆弧时，半径参数就是决定圆心到边缘距离的关键值。例如，以下代码会...