HTML canvas绘制椭圆

<!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绘制椭圆的更多相关文章

如何使用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 ...

随机推荐

Android -- 从源码的角度一步步打造自己的TextView
1,自定义控件一直是我们的痛点,今天就和大家一点点去了解了解,首先一般的自定义控件都是继承于View类,所以我们先来看看view的一些重要的方法,这是官方文档,大家想了解更多也可以去看看,这里我展示对 ...
Luogu P3367 【模板】并查集
题目描述如题,现在有一个并查集,你需要完成合并和查询操作. 输入输出格式输入格式: 第一行包含两个整数N.M,表示共有N个元素和M个操作. 接下来M行,每行包含三个整数Zi.Xi.Yi 当Zi=1 ...
[算法题] Remove Duplicates from Sorted Array ii
题目内容本题来源LeetCode Follow up for "Remove Duplicates": What if duplicates are allowed at mos ...
Linux IP_FORWARD说明
--Linux IP_FORWARD说明 -----------------------------2014/03/01 ip地址分公有地址和私有地址,public address是由INIC(int ...
MFC加载PNG图片并实现双缓冲
因为PNG包含Alpha通道,所以不同于BITMAP,在MFC中使用CImage类对其进行处理,通常使用load和draw成员函数. 所以标题的论述可以进一步解释为,使用CImage实现双缓冲. 通常 ...
Hadoop分布式集群搭建
layout: "post" title: "Hadoop分布式集群搭建" date: "2017-08-17 10:23" catalog ...
python中金额计算的小问题
由于二进制对浮点运算存在精度问题,所以一些浮点计算经常会出现以下情况: # -*- coding: utf-8 -*- a = 1 b = 0.9 print(a-b) 结果: 0.099999999 ...
zTree理解和简单Demo（转）
zTree是利用 jQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件.整个zTree的页面显示核心代码是. <span style="font-family:V ...
Vim入门基础
公司新员工学习有用到,Vim官网的手册又太大而全,而网上各方资料要么不全面,要么不够基础.在网上搜集各方资料,按照自己的框架整理一份Vim入门基础教程,分享出来.特点是偏向基础,但对入门者来说足够全面 ...
php 开发调试的常用技巧和工具
nginx的access.log 作用: 记录一个页面请求中,服务器接收到的所用相关的url. 根据此log, 对服务器上调用了哪些服务,可以一目了然,快速理清业务关系,调试开发非常赞! 注意: ...

HTML canvas绘制椭圆

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

随机推荐

热门专题