<!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. Windows下搭建Git 服务器: BONOBO GIT SERVER + TortoiseGit

    本文将介绍如何在Windows操作系统下搭建Git服务器和客户端.服务器端采用的是Bonobo Git Server,一款用ASP.NET MVC开发的Git源代码管理工具,界面简洁,基于Web方式配 ...

  2. 中国大学MOOC-翁恺-C语言程序设计习题集-解答汇总

    中国大学MOOC-翁恺-C语言程序设计习题集 PAT 习题集 02-0. 整数四则运算(10) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standar ...

  3. JVM笔记——技术点汇总

    目录 · 初步认识 · Java里程碑(关键部分) · 理解虚拟机 · Java虚拟机种类 · Java语言规范 · Java虚拟机规范 · 基本结构 · Java堆(Heap) · Java栈(St ...

  4. 诡异错误一： ValueError: embedded null character

    使用如下语句读取名为0_xx.txt 文件时,遇到错误  ValueError: embedded null character if __name__ == '__main__': fr = ope ...

  5. 窗体调用 OCX 的使用方法（MFC,WINFORM）

    在上一篇中,我们做了一个OCX控件,叫mfcActive.ocx,在这一篇我们要做的就是使用这个ocx控件.第一步:创建一个MFC的对话框工程(其实winform 也是一样的) 第二步:在工具箱中常规 ...

  6. selenium--关键字驱动

    package com.dn.twohomework;import java.util.ArrayList;import java.util.Set;import java.util.List;// ...

  7. 一步一步学J2SE-HashMap的实现原理

    HashMap数据结构图 HashMap的数据结构是通过数组加链表实现的.数组是HashMap的主体,链表是为了解决Hash碰撞问题. HashMap的Get方法 1.  在get的时候首先判断key ...

  8. .net到Java那些事儿--整合SSH

    一.介绍       整体介绍分成两个部分,第一.net转到Java的原因,第二开发SSH时候的环境介绍:       .net到Java的原因: .net开发也将近快3年的样子,加上现在的老东家换过 ...

  9. JavaScript之获取节点

    JavaScriopt DOM有三大节点:元素节点.属性节点.文本节点. 其中获取元素节点的三种主要方法有: 1.document.getElementById();此方法根据节点的唯一id值获取节点 ...

  10. Promise与异步

    不知道promise,大家现在用了吗?如果还不了解的话,今天就来对了-基础的了解起来- 正文从这开始- 接触过promise的的都知道它的应用场景和用途,Promise可以用来避免异步操作函数里的嵌套 ...