- 浏览: 60301 次
- 性别:
- 来自: 大连
文章分类
最新评论
<!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 1216<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 566CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1013script代码: <script type=" ... -
html之marquee详解
2014-03-28 10:07 601该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 18441。html中a标签的四个属性书写是有顺序的,如果顺序不对,显 ... -
修改360浏览器内核
2014-03-10 17:19 1886浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 715有时候,为了网页设计的美观,需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1177<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 618对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1810开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 551进行网页设计时,由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 894<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 535■ 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得 ... -
顶部浮动
2013-11-29 09:37 408<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 504很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现 ... -
转 CSS hack:针对IE6,IE7,firefox显示不同效果
2013-09-05 13:55 964CSS hack:针对IE6,IE7,firefox显示不同效 ... -
white-space:
2013-08-30 10:57 452定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1141{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 538<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 737所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同 ...
相关推荐
让IE兼容 HTML5的canvas标签 excanvas的文件
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
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画布随机颜色变化特效 html5 canvas画布随机颜色变化特效
HTML5 Canvas炫酷3D背景动画代码.
html5 canvas画布绘制圆形时钟代码
HTML5 使用canvas画布做小球回弹动画,使绘画出来的小球沿着矩形的轨迹进行对称回弹,代码简单易懂,适合初学者练习。
h5 canvas移动端画板
这是一款基于HTML5 Canvas的放射线动画,实现这款动画的思路也比较简单,先是根据数学图形公式构造放射线绘制的路径,然后利用HTML5将射线绘制在Canvas上,并在射线上绘制随机的颜色,这样整个射线图形看上去...
我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧...
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf