HTML5 arc的例子
demo.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"> <title>arc</title>
<script>
function init() {
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,80,0,1.5*Math.PI,false);
ctx.closePath();
ctx.fillStyle="#ccc";
ctx.fill();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="400" height="300" style="border:2px blueviolet solid"></canvas>
</body>
</html>
效果:
定义和用法
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
提示:请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
- 中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角:arc(100,75,50,0,1.5*Math.PI)
- 结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)
2017-09-08 12:54:48
HTML5 arc的例子的更多相关文章
- HTML5显示地图例子
html 5获取GPS位置,Google地图显示 场景: JQuery Mobile 代码片段: <script type="text/javascript"> $(' ...
- HTML5 Canvas 小例子 旋转的时钟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- arc路径例子-磊哥
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> & ...
- HTML5 Canvas 小例子 伸缩旋转方块
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas 小例子 简易画板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas 小例子 旋转的图片
<一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...
- html5 canvas 圆形抽奖的实例
年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...
- html5入门:教你用canvas写一个时钟
今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...
- html5 Worker学习
HTML: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <t ...
随机推荐
- ionic学习使用笔记(二) slide 组件的使用
开始做的时候,遇到了个要用ionic实现 有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又不能有滚动条. 之前使用jQuery来实现的话,其实 ...
- Python网络爬虫-爬取微博热搜
微博热搜的爬取较为简单,我只是用了lxml和requests两个库 url=https://s.weibo.com/top/summary?Refer=top_hot&topnav=1& ...
- windows下源码安装调试postgresql
环境:windows 10 postgresql版本:postgresql-9.6.5 使用工具:vs2017社区版 辅助工具:perl.diff.flex.bison 相关工具下载地址: perl下 ...
- WebGIS常用代码集锦
一.普通代码 1.坐标转换 ol.proj.transform(coordinate, source, destination) ol.proj.transform(coordinate, 'EPSG ...
- jmeter(二十):Logic Controller:逻辑控制器(上)
逻辑控制器用来控制采样器(samplers)的执行顺序,根据实际需要定制执行规则.在控制器层级下面的所有的采样器都会当做一个整体,执行时也会一起被执行. Logic Controller种类: 以上L ...
- leetcode 20. 有效的括号 (python)
给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合.左括号必须以正确的顺序闭合.注意空字符串可被认为是 ...
- 百度地图api设置点的自定义图标不显示
百度地图api设置点的设置代码为: var myIcon = new BMap.Icon(): 所以首先要找到这行代码,并在括号中加上图片信息: var myIcon = new BMap.Icon( ...
- C# 做延迟,但系统又能同时能执行其它任务
private void Delay(int Millisecond) //使用时直接调用即可 { DateTime current = DateTime.Now; while (current.Ad ...
- mysql-M-S-S模型 中继器 级联
1.基础环境 三台虚机并且安装有mysql 并且同步好数据库 2.主服务器-创建账号并授权 mysql> create user 'mslave'@'X.X.X.X' identified by ...
- Buy Tickets 【POJ - 2828】【线段树】
题目链接 有N次操作,每次都是将第i个数放置在第pos个数的后面,并且这个数的值是val. 这个线段树的思维确实很好,我们可以发现,后面放进去的数,一定是强制位置的,而前面放的数,会随着后面的数进入而 ...