<!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="" />

HTML canvas绘制椭圆的更多相关文章

  1. 如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法

    这篇博文主要针对浏览器中绘制椭圆的方法扩展.在网上搜索了很多,发现他们绘制椭圆的方式都有缺陷.其中有压缩法,计算法,贝塞尔曲线法等多种方式.但是都不能很好的绘制出椭圆.所有我就对这个绘制椭圆的方式进行 ...

  2. HTML5 Canvas中绘制椭圆的几种方法

    1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...

  3. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  4. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  6. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

随机推荐

  1. MongoDB安全策略

    一,修改启动端口 mongo的默认端口为27017 如果启用的是27017端口并且在公网上很容易被人攻击,所以第一点我们要修改端口 sudo ./mongod --dbpath=/data/db -- ...

  2. POJ-1861-NETWORK 解题报告

    Network Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16628   Accepted: 6597   Specia ...

  3. 【NO.8】jmeter-场景-上传文件-send-a-file

    简要说就3点: POST请求 Request的参数都写在路径内,不写在表单里 上传的文件写在表单里 只要记住以上3点,也就避免了在设计脚本的时候走弯路.下面具体图文并茂地介绍如何使用Jmeter实现上 ...

  4. pentaho专题之reporting design入门指南

    今天来说一说pentaho表报设计工具reporting design. 进入界面之后,点击File,选择New一个表报. 这时候我们可以看见整个的设计版面了.   最上面的是工具条,最左面的是设计小 ...

  5. android 学习Layout布局的使用

    android 常用布局 LinearLayout(线性布局) 线性的 垂直的 水平的RelativeLaytout(相对布局) 最灵活的TableLayout(表格布局) 使用GridView代替A ...

  6. master log 与relay log的关系

    --master log 与relay log的关系 -------------------------------2014/06/09 Just to clarify, there are thre ...

  7. Orleans---持久化

    Orleans配置---持久化 这是Orleans系列文章中的一篇.首篇文章在此 Grain理想的生命周期应该如下图所示: 这就如美国电影中的大反派一样,死了再复活,死了再复活.当然如果复活的反派没有 ...

  8. BZOJ 3027 Sweets 生成函数，容斥

    Description John得到了n罐糖果.不同的糖果罐,糖果的种类不同(即同一个糖果罐里的糖果种类是相同的,不同的糖果罐里的糖果的种类是不同的).第i个糖果罐里有 mi个糖果.John决定吃掉一 ...

  9. MYSQL创建数据库时候直接指定编码和排序规则

    安装我 在网上搜索的结果执行 代码: sudo gedit /etc/mysql/my.cnf 设置了默认编码为 UTF8 代码: [client]port            = 3306sock ...

  10. 【Tomcat】shell 部署配置 war包

    使用shell 一次执行,将项目中的war包的配置全部修改 #!/bin/bash #----------------------------------------------- # FileNam ...