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 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- dos2unix和unix2dos
dos2unix将windows格式的文件转换为linux格式的文件. unix2dos将linux格式的文件转换为windows格式的文件. dos2unix和unix2dos会转换windows和 ...
- setinIerval和setTimeout的区别？
setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...
- BZOJ 3309: DZY Loves Math [莫比乌斯反演 线性筛]
题意:\(f(n)\)为n的质因子分解中的最大幂指数,求\(\sum_{i=1}^n \sum_{j=1}^m f(gcd(i,j))\) 套路推♂倒 \[ \sum_{D=1}^n \sum_{d| ...
- BZOJ 2064: 分裂 [DP 状压 转化]
传送门 题意:一开始$n$块面积最后$m$块面积,面积和相等每次可以分裂或者合并,问最少几次 昨天忘发了... 不会.... 考虑最差情况,$n+m-2$所有先合并再分裂 发现只有当前后两个子集相等时 ...
- 微信小程序项目踩过的几个坑
一.前言 近期,开始了一段辛酸的还未开始就已经结束的"创业"(参见我的第二次创业,以梦为马,莫负韶华).大体上是开发了一款微信小程序,关于创业这件事情就不细说了,本文主要介绍一下开 ...
- 本地Linux服务器上配置Git
当我们需要拉取远程服务器代码到本地服务器时,我们首先要确定已经配置了正确的Git账号,可以从~/.gitconfig文件(为隐藏文件,需要使用ls -a查看),以及~/.ssh下的id_rsa.pub ...
- Flink入门使用
完全参考:Flink1.3QuickStart 启动本地运行 首先找一台安装了hadoop的linux. 将安装包解压,到bin目录启动local模式的脚本. tar -zxvf flink-1.3. ...
- asp.net core 使用html文件
在asp.net core 项目中,使用html文件一般通过使用中间件来提供服务: 打开 NuGet程序管理控制台 输入install-package Microsoft.aspnetcore.sta ...
- UITableView！别再用代码计算行高了（一）
你还在用代码去计算行高吗?你不感觉那种方式很low吗?从今天起,试着做些改变吧! 别给我讲你喜欢写代码的感觉,你就是要用代码去计算行高,那我这篇文章不适合你. 在讲解复杂内容之前,还是先学习简单的内容 ...
- GitHub中开启二次验证Two-factor authentication，如何在命令行下更新和上传代码
最近在使用GitHub管理代码,在git命令行管理代码时候遇到一些问题.如果开起了二次验证(Two-factor authentication两个要素认证),命令行会一直提示输入用户名和密码.查找了一 ...