学习Canvas绘图与动画基础 制作弧和圆（五）
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>制作弧和圆</title>
6 </head>
7 <body>
8 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:50px auto;">
9 当前浏览器不支持Canvas,请更换浏览器
10 </canvas>
11 <script>
12 window.onload=function(){
13 var canvas=document.getElementById("canvas");
14
15 canvas.width=1024;
16 canvas.height=768;
17
18 var context=canvas.getContext("2d");
19
20 context.lineWidth=5;
21 context.strokeStyle="#005588";
22 context.arc(300,300,200,0,1.5*Math.PI);
23 context.stroke();
24 }
25 </script>
26 <!--
27 说明：
28 1.context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)；//(圆心x坐标，圆心y坐标，半径，开始弧度值，结束弧度值，弧线绘制方向)弧线绘制方向默认为false为顺时针绘制方向。
29
30 -->
31
32 </body>
33 </html>
绘制效果如下：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>制作弧和圆</title>
6 </head>
7 <body>
8 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:50px auto;">
9 当前浏览器不支持Canvas,请更换浏览器
10 </canvas>
11 <script>
12 window.onload=function(){
13 var canvas=document.getElementById("canvas");
14
15 canvas.width=1024;
16 canvas.height=768;
17
18 var context=canvas.getContext("2d");
19
20 context.lineWidth=5;
21 context.strokeStyle="#005588";
22 for(var i=0;i<10;i++){
23 context.beginPath();
24 context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
25 context.closePath();
26 context.stroke();
27 }
28 for(var i=0;i<10;i++){
29 context.beginPath();
30 context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
31 context.stroke();
32 }
33 for(var i=0;i<10;i++){
34 context.beginPath();
35 context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
36 context.closePath();
37 context.stroke();
38 }
39 context.fillStyle="#005588";
40 for(var i=0;i<10;i++){
41 context.beginPath();
42 context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true);
43 context.closePath();
44 context.fill();;
45 }
46
47 for(var i=0;i<10;i++){
48 context.beginPath();
49 context.arc(50+i*100,540,40,0,2*Math.PI*(i+1)/10,true);
50 context.fill();;
51 }
52
53
54 }
55 </script>
56 <!--
57 说明：
58 1.当我们当前绘制的状态的路径不是封闭的路径的时候，如果我们使用了closePath()，closePath()会自动的为我们将这段不封闭的路径的首尾用线段连接起来
59 2.beginPath()和closePath()不一定要成对出现，beginPath()代表为我们规划一段新的路径，beginPath()代表要结束当前路径，如果当前路径没有封闭，会自动封闭路径
60 3.closePath()这个函数对于fill()是没有用的，当调用fill()时，canvas会自动把没有封闭的路径给封闭
61 -->
62
63 </body>
64 </html>
学习Canvas绘图与动画基础 制作弧和圆（五）的更多相关文章
- 学习Canvas绘图与动画基础 绘制多条路径（四）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 为多边形着色（三）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 绘制直线（二）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 canvas入门（一）
一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- canvas-炫丽的倒计时效果Canvas绘图与动画基础
canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...
- 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- WPF学习之绘图和动画
如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...
随机推荐
- Nodejs学习笔记（1） Nodejs安装+借助express模块简单部署服务器
1 安装 1.1 下载和安装 1.2 什么是REPL?如何使用? 1.3 npm对单一模块的安装和删除功能 1.4 通过package.json自定义模块(安装模块) 1.5 设置全局目录 2 部署网 ...
- Python中并发、多线程等
1.基本概念 并发和并行的区别: 1)并行,parallel 同时做某些事,可以互不干扰的同一时刻做几件事.(解决并发的一种方法) 高速公路多个车道,车辆都在跑.同一时刻. 2)并发 concurre ...
- Spring Boot 自动装配原理
Spring Boot 自动装配原理 Spring Boot 在启动之前还有一系列的准备工作,比如:推断 web 应用类型,设置初始化器,设置监听器,启动各种监听器,准备环境,创建 applicati ...
- JPEG解码——(6)IDCT逆离散余弦变换
本篇是该系列的第六篇,承接上篇IZigZag变换,介绍接下来的一个步骤--逆离散余弦变换,即逆零偏置前的一个步骤. 该步骤比较偏理论,其业务是对IZigZag变换后的数据,再进一步的处理,使其恢复DC ...
- OpenCV图像处理中“找圆技术”的使用
一.为什么"找圆" 圆是基本图形的一种,更为重要的是,自然情况下采集的图像,很少大量存在"圆":但凡存在的,大都是人工的,那么就必然代表特定的意义,从而 ...
- redis数据库如何批量删除键和设置过期时间？
我们可以借助Linux中的xargs,在终端中执行命令来实现这两个功能. 一.批量删除键 批量删除以"key"开头key的方法,需要借助Linux中的xargs,在终端中执行以下命 ...
- Android Studio中批量注释 Java代码
•ctrl+/ 选中需要注释的多行代码,然后按 ctrl + / 实现多行快速注释: 再次按下 ctrl + / 取消注释. •ctrl+shift+/ 选中一行或几行代码,按 ctrl + shif ...
- 动图：删除链表的倒数第 N 个结点
本文主要介绍一道面试中常考链表删除相关的题目,即 leetcode 19. 删除链表的倒数第 N 个结点.采用 双指针 + 动图 的方式进行剖析,供大家参考,希望对大家有所帮组. 19. 删除链表的倒 ...
- Java8中的默认方法
作者:汤圆 个人博客:javalover.cc 前言 大家好啊,我是汤圆,今天给大家带来的是<Java8中的默认方法>,希望对大家有帮助,谢谢 文章纯属原创,个人总结难免有差错,如果有,麻 ...
- 记一次metasploitable2内网渗透之8180端口tomcat
扫描网段存活主机,确定内网metasploitable主机位置 nmap -T4 -sP 192.168.1.0/24 对目标主机进行扫描端口开放和系统信息 nmap -T4 -sV -Pn 192. ...