学习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>

绘制效果如下:

时间: 12-16

学习Canvas绘图与动画基础 制作弧和圆(五)的相关文章

学习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; disp

学习Canvas绘图与动画基础(一)

一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="1024" height=&

canvas-炫丽的倒计时效果Canvas绘图与动画基础

canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支持的话要提示的也不提示,开发者工具中的Element中的代码也什么都没有. HTML: <canvas id="canvas" style="border:1px solid red;"></canvas> JS : var canvas = d

HTML5-炫丽的时钟效果Canvas绘图与动画基础练习

源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ne

炫丽的倒计时效果Canvas绘图与动画基础

digit.js 1 digit = [ 2 [ 3 //0 4 [0, 0, 1, 1, 1, 0, 0], 5 [0, 1, 1, 0, 1, 1, 0], 6 [1, 1, 0, 0, 0, 1, 1], 7 [1, 1, 0, 0, 0, 1, 1], 8 [1, 1, 0, 0, 0, 1, 1], 9 [1, 1, 0, 0, 0, 1, 1], 10 [1, 1, 0, 0, 0, 1, 1], 11 [1, 1, 0, 0, 0, 1, 1], 12 [0, 1, 1, 0, 1

WPF学习之绘图和动画

如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是否吸引用户的眼球也已经成为衡量软件的标准. 软件项目成功的三个要素是:资源.成本.时间.无论是为了在竞争中保持不败还是为了激发起用户对软件的兴趣,提高软件界面的美化程度.恰当的将动画和3D等效果引入应用程序都是一个必然趋势.然而使用传统的桌面应用程序开发工具和框架(如Winform.MFC.VB.D

Canvas绘图与动画详解

1.canvas 绘制       当canvas不设置大小时,默认宽300,高150:       注意:不建议使用css 设置大小,可以利用行内样式 width="",height=""去设置(无单位):                 canvas 是基于状态进行绘制的:      举例说明:            上述代码显示结果为全部均为黑色:       如何更改? 在绘制前context.beginPath(),结束后 context.closePat

JavaSE入门学习46:文件传输基础之I/O流(五)(Java序列化)

六对象的序列化和反序列化 (1)序列化和反序列化概述 Java提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的 数据.有关对象的类型的信息和存储在对象中数据的类型. 将序列化对象写入文件之后,可以从文件中读取出来,并且对它进行反序列化,也就是说,对象的类型信息.对 象的数据,还有对象中的数据类型可以用来在内存中新建对象. 整个过程都是Java虚拟机(JVM)独立的,也就是说,在一个平台上序列化的对象可以在另一个完全不同的平台上 反序列化该对象. (2

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

HTML5 学习总结(四)--canvas绘图.WebGL.SVG 目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML5游戏开发 2.2.1.Cocos2D-HTML5 2.2.2.Egret(白鹭引擎) 三.SVG 3.1.SVG Hello Wrold 3.2.多种引入SVG的方法 3.3.画直线 3.4.画椭圆 3.5.文本与矩形 3.6.向