HTML5之Canvas画圆形
HTML5之Canvas画圆形
1、设计源码
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5之Canvas画圆形</title>
</head>
<body onLoad="drawFour('canvas')">
<canvas id="canvas" width="1200" height="560"/>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.fillStyle="#0000ff";
context.beginPath();
context.arc(600,300,200,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>
</body>
2、设计结果
3、分析说明
（1）创建路径
context.beginPath();
（2）创建圆形路径
context.arc(600,300,200,0,Math.PI*2,true);
第一个参数x：起点横坐标
第二个参数y：起点纵坐标
第三个参数radius：圆的半径
第四个参数startAngle：开始角度
第五个参数endAngle：结束角度
第六个参数anticlockwise：是否按照顺时针方向进行绘制
（3）关闭路径
context.closePath();
（4）设定绘制样式
context.fillStyle="#0000ff";
context.fill();
HTML5之Canvas画圆形的更多相关文章
- HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- Canvas画圆形
转载:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#圆弧 function d ...
- HTML5之Canvas影片广场
HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 canvas绘制圆形印章，以及与页面交互
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- （转）浅谈HTML5与css3画饼图！
神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- AdobeFlashBuilder还不如AdobeFlashProfessional写actionscript体验好
AdobeFlashBuilder还不如AdobeFlashProfessional写actionscript体验好. 这真是奇怪了.
- ABP 多租户 对应多数据库 租户启动报错
什么是多租户? “软件多租户是指一个软件体系结构,其中一个软件实例在一个服务器上运行,并为多个租户提供服务*租户是一组共享具有软件实例特定权限的公共访问权限的用户. 架构中,软件应用程序旨在为每个租户 ...
- 让SpringMVC Restful API优雅地支持多版本
好久没有更新博客,难得有空,记录一下今天写的一个小工具,供有需要的朋友参考. 在移动APP开发中,多版本接口同时存在的情况经常发生,通常接口支持多版本,有以下两种方式: 1.通过不同路径区分不同版本 ...
- XSD详解一 - 基本概念
本分类下的文章主要是对W3School的文档进行整理:http://www.w3school.com.cn/x.asp XML Schema 是基于 XML 的 DTD 替代者. XML Schema ...
- C#常用代码片段备忘
以下是从visual studio中整理出来的常用代码片段,以作备忘 快捷键: eh 用途: 类中事件实现函数模板 private void MyMethod(object sender, Event ...
- CentOS安装编译Lua
Lua介绍 Lua 是一个小巧的脚本语言.是巴西里约热内卢天主教大学(Pontifical Catholic University of Rio de Janeiro)里的一个研究小组,由Robert ...
- a元素的两个重要功能和表格布局
⦁ 发送邮件:<a href="mailto:231455557@qq.com">联系我们</a> ⦁ 锚点两个重要应用:查看目录 提供菜单功能回到顶 ...
- java线程池技术(一)：ThreadFactory与BlockingQueue
版权声明:本文出自汪磊的博客,转载请务必注明出处. 一.ThreadFactory概述以及源码分析 ThreadFactory很简单,就是一个线程工厂也就是负责生产线程的,我们看下ThreadFact ...
- Thrift入门
简介 Thrift最初由Facebook研发,主要用于各个服务之间的RPC通信,支持跨语言,常用的语言比如C++, Java, Python, PHP, Ruby, Erlang, Perl, Has ...
- xBIM WeXplorer xViewer 浏览器检查
目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...