<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<canvas id = "Mycanvas" width="300" height="300" style="border:2px solid red;"></canvas>
<script type="text/jscript">
var canvas = document.getElementById("Mycanvas");
var context = canvas.getContext("2d");
var x = 100;
var y = 100;
var a = 50;
var b = 30
//选择a、b中的较大者作为arc方法的半径参数
var r = (a > b) ? a : b;
var ratioX = a / r; //横轴缩放比率
var ratioY = b / r; //纵轴缩放比率
context.scale(ratioX, ratioY); //进行缩放（均匀压缩）
context.beginPath();
//从椭圆的左端点开始逆时针绘制
context.arc(x , y , r, 0, 2 * Math.PI);
context.fillStyle="#E2C1A7";
context.fill();
context.stroke();
</script>
</body>
</html>
效果图：
aaarticlea/png;base64,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" alt="" />
- 如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法
这篇博文主要针对浏览器中绘制椭圆的方法扩展.在网上搜索了很多,发现他们绘制椭圆的方式都有缺陷.其中有压缩法,计算法,贝塞尔曲线法等多种方式.但是都不能很好的绘制出椭圆.所有我就对这个绘制椭圆的方式进行 ...
- HTML5 Canvas中绘制椭圆的几种方法
1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...
- 使用Canvas绘制图形的基本教程
原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
随机推荐
- 米扑科技的开源项目：sitemap-php 自动生成网站地图
米扑科技旗下的产品,近期正在做SEO网站优化,其中子需求之一是调研实现了网站地图(sitemap.xml) 封装简化了许多功能模块,现在分享出来,源代码可在Github上下载,有简单的示例. Gith ...
- mac使用小提示
1. 升级到serria系统,默认需要长按caps lock 才会锁定,段按会切换输入法.解决方法: 设置--键盘--输入法, 取消勾选"使用大写锁定键切换输入法" 2. 是否显 ...
- MyISAM 和InnoDB 区别
MyISAM 和InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别 为:MyISAM类型不支持事务处理等高级处 ...
- 剑指OFFER——正则表达式匹配
请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式.例如,字 ...
- 再说php依赖注入
前段时间,有朋友问我yii2的依赖注入是怎么个玩法,好吧, 经常看到却一直不甚理解的概念,这里我再对自己认识的依赖注入深刻的表达下我的理解,依赖注入(DI)以及控制器反转(Ioc). 依赖注入就是组件 ...
- noi2015 day1 T2软件包管理器
noi2015 软件包管理器 Description Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软 ...
- shell解析命令行的过程以及eval命令
本文说明的是一条linux命令在执行时大致要经过哪些过程?以及这些过程的大致顺序. 1.1 shell解析命令行 shell读取和执行命令时的大致操作过程如下图: 以执行以下命令为例: echo -e ...
- oracle多表连接查询竟然还有这种操作
仔细观察上面几个图,比较下 oracle数据库中的+操作符竟然可以替换left join 和right join sql server暂时没用到过
- 刚安装Fedora 23工作站后，你必须要做的24件事
[51CTO.com快译]Fedora 23工作站版本已发布,此后我们就一直在密切关注它.我们已经为新来读者介绍了一篇安装指南:<Fedora 23工作站版本安装指南> 还有一篇介绍如何从 ...
- spring boot 登录注册 demo （二） -- 数据库访问
通过data-jpa来访问数据库 <dependency> <groupId>org.springframework.boot</groupId> <arti ...
