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 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- python3,进程间的通信
本文来源于python 3.5版本的官方文档 multiprocessing模块为进程间通信提供了两种方法: 1.进程队列queue The Queue class is a near clone o ...
- Android+TensorFlow+CNN+MNIST 手写数字识别实现
Android+TensorFlow+CNN+MNIST 手写数字识别实现 SkySeraph 2018 Email:skyseraph00#163.com 更多精彩请直接访问SkySeraph个人站 ...
- ABAP 程序中退出操作
CHECK. 1)CHECK 后面要跟一个表达式,当表达式值为假(false)时,CHECK发生作用,退出循环(LOOP)或处理程序(Processing Block). 2)如果CHECK出现在循环 ...
- BZOJ 2115: [Wc2011] Xor [高斯消元XOR 线性基 图]
啦啦啦 题意: N 个点M条边的边带权的无向图,求1到n一条XOR和最大的路径 感觉把学的东西都用上了.... 1到n的所有路径可以由一条1到n的简单路径异或上任意个简单环得到 证明: 如果环与路径有 ...
- 在.NetCore中使用Myrmec检测文件真实格式
Myrmec 是什么? Myrmec 是一个用于检测文件格式的库,Myrmec不同于其它库或者手写检测代码,Myrmec不依赖文件扩展名(在实际使用中,你的用户很可能使用虚假的扩展名欺骗你的应用程序) ...
- Windows Server 2016-命令行Ntdsutil迁移FSMO角色
上章节我们介绍了有关图形化界面迁移FSMO角色,进行本章节之前我们首先回顾一下FSMO的五种操作主机角色:架构主机角色(Schema Master).域命名主机角色(Domain Naming Mas ...
- CSS小技巧使用
1.清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....// 清除浮动 .clearfix{ zoom: 1; } .c ...
- [Python Study Notes] python面试题总结
python语法以及其他基础部分 可变与不可变类型: 浅拷贝与深拷贝的实现方式.区别:deepcopy如果你来设计,如何实现: __new__() 与 __init__()的区别: 你知道几种设计模式 ...
- 搭建dnsmasq服务器，局域网内部解析
系统:centos6.5 公司内部需求一台dns server,解析内部域名(该域名不需要在公网上解析) 安装了"bind bind-utils"包,配置里设置转发到外部电信dns ...
- Ubuntu下利用Apache转发模块实现反向代理
Apache的反向代理主要利用转发模块,proxy和proxy_http 先配置 Apache 支持proxy 和 proxy_http 在Ubuntu系统下,Apache的配置文件在目录/etc/a ...