[html5] canvas 绘图：八卦图
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<!--下面excanvas.js需下载才能在IE下支持canvas-->
<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script>
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
<script src="excanvas.js"></script>
<![endif]--> <script type="text/javascript">
window.onload = function(){
var ctx = document.getElementById("pic").getContext('2d'); //绘制白色半圆的代码如下：
ctx.beginPath();
ctx.arc(200,200,80,1.5*Math.PI,0.5*Math.PI,false);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill(); //绘制黑色半圆的代码如下：
ctx.beginPath();
ctx.arc(200,200,80,0.5*Math.PI,1.5*Math.PI,false);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill(); //绘制黑色小圆
ctx.beginPath();
ctx.arc(200,240,40,0,Math.PI*2,true);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill(); //绘制白色小圆
ctx.beginPath();
ctx.arc(200,160,40,0,Math.PI*2,true);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill(); //绘制白色小圆心
ctx.beginPath();
ctx.arc(200,160,5,0,Math.PI*2,true);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill(); //绘制黑色小圆心
ctx.beginPath();
ctx.arc(200,240,5,0,Math.PI*2,true);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill(); //绘制文字代码如下：
ctx.save();
ctx.fillStyle="black";
ctx.globalAlpha="0.4";
ctx.textAlign="center";
ctx.font="32px Arial";
ctx.shadowColor="rgba(0,0,0,0.4)";
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=-10;
ctx.shadowBlur=2;
ctx.fillText('Hello Canavs',200,100);//IE不支持 ctx.restore();
} </script> </head> <body> <canvas id="pic" width="400" height="400" style="border:1px solid; background:#E1E1FF;margin:0px auto;display:block;"></canvas> </body> </html>
效果：
[html5] canvas 绘图：八卦图的更多相关文章
- HTML5 Canvas绘图如何使用
--------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...
- HTML5 canvas绘图基本使用方法
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...
- HTML5 canvas绘图
HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...
- HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！
步骤 1 2 3 4 5 简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...
- HTML5 Canvas绘图系列之一：圆弧等基础图形的实现
之前的一个微信项目已经要结项了,最近整理一下项目中使用较多的canvas画图方面的知识吧,打算写个3,4篇的样子.本篇主要介绍基础操作和弧线画法. 之后再写一下趋势图,直方图,文本图像处理的. 言归正 ...
- HTML5 Canvas制作雷达图实战
雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图. 下面,用HTML5的Cavas来实现雷达图. 效果 一.创建Canvas var mW ...
- canvas 绘制八卦图
绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...
- HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
- HTML5 canvas绘图基础（电子名片生成器源码）
创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...
随机推荐
- Groovy中那些神奇注解之InheritConstructors
上一篇:Groovy中那些神奇注解之ToString 写完ToString,本来想今天就写到这了,突然觉得InheritConstructors注解实在也是个神器,写起来也没多少字,还是写了吧. In ...
- Azure 网站上的 Java
编辑人员注释:本文章由Windows Azure 网站团队的项目经理Chris Compy 撰写. Microsoft 已推出针对 Azure 网站上基于 Java 的网站的支持.此功能旨在通过 ...
- BZOJ 2252: [2010Beijing wc]矩阵距离
题目 2252: [2010Beijing wc]矩阵距离 Time Limit: 10 Sec Memory Limit: 256 MB Description 假设我们有矩阵,其元素值非零即1 ...
- 关于如何使用three.js的小教程<一>
昨天看了看three.js这个东西,身为一个3D引擎,他还是非常强大的.官网上有个tutorial讲的不甚具体.http://aerotwist.com/tutorials/getting-start ...
- Use Excel to write insert SqlScript
="insert into Process.dbo.TempHampInGoodStandingLoanList (Loan_No,ProgramType,ModificationEffec ...
- js柯里化的一个应用
听到同学说面试一道题目 add(1)(2)(3)(4); 查询了下资料 这是一个js里面的柯里化 现象 add_curry防范返回的是一个 retVal,并不是执行结果.这里的代码很想递归,但是不是 ...
- 谈如何使用c中的qsort快速排序库函数 按主次关键字正确排序
快排的效率很快,但是我们很少知道如何利用它进行多关键字排序,比如我想对一个数组a[i][0]进行的一个元素进行主关键字排序,又想对a[i][1]进行次关键字排序.那么接下来就是解决这个问题的方法. 学 ...
- HTML静态网页（框架）
1.frameset frameset最外层,使用时需要去除body改用frameset. <frameset rows="100,*" frameborder=" ...
- SQL2000下修复某数据库的经历
某个SQL2000的数据库,在通过备份/还原的方法升级到2005时发生错误: 查找解决方法未果 正好最近在看 @一线码农 的<sql server之旅>,就想自己试试解决这个问题 首先运行 ...
- hive 分区操作记录
创建分区: alter table table_name add partition (dt='20150423') location '/data/text/20150423';