<!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 绘图：八卦图的更多相关文章

  1. HTML5 Canvas绘图如何使用

    --------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...

  2. HTML5 canvas绘图基本使用方法

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...

  3. HTML5 canvas绘图

    HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...

  4. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

  5. HTML5 Canvas绘图系列之一：圆弧等基础图形的实现

    之前的一个微信项目已经要结项了,最近整理一下项目中使用较多的canvas画图方面的知识吧,打算写个3,4篇的样子.本篇主要介绍基础操作和弧线画法. 之后再写一下趋势图,直方图,文本图像处理的. 言归正 ...

  6. HTML5 Canvas制作雷达图实战

    雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图. 下面,用HTML5的Cavas来实现雷达图. 效果 一.创建Canvas var mW ...

  7. canvas 绘制八卦图

    绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...

  8. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  9. HTML5 canvas绘图基础（电子名片生成器源码）

    创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...

随机推荐

  1. 四轴飞行器1.5 各种PID对比分析及选择

    原创文章,欢迎转载,转载请注明出处 这篇文章主要介绍我对PID的理解,以及选择PID算法的过程. 一 PID的理解和学习过程 二 飞控的PID效果 先上个飞控PID的响应的视频:介绍在后面 地址:ht ...

  2. 一步一步学习SignalR进行实时通信_2_Persistent Connections

    原文:一步一步学习SignalR进行实时通信_2_Persistent Connections 一步一步学习SignalR进行实时通信\_2_Persistent Connections Signal ...

  3. POJ 2774 Long Long Message（后缀数组）

    [题目链接] http://poj.org/problem?id=2774 [题目大意] 求最长公共子串 [题解] 将两个串中间嵌一个字符相连,求一遍后缀数组 如果排名相邻的两个后缀的开端是分属于两个 ...

  4. jquery-plugin-biggerLink,highLight-层加亮_andy 阳光生活_百度空间

    How to get the xpath by clicking an html element How to get the xpath by clicking an html element Qu ...

  5. MZL's xor

    MZL's xor Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/65536K (Java/Other) Total Sub ...

  6. unix more命令

    [语法]: more   [-cdflrsuw]  [- 行数] [+ 行数] [+ / 模式 ] [ 文件 ... ] [说明]: 将文件显示在终端上.每次一屏,在左下部显示 --more--.若是 ...

  7. objective-C学习笔记（五）函数成员：初始化器和析构器

    初始化器:init 对象初始化器: -(id)init 可以重载多个. 类型初始化器: +(id)initialize只能有一个. 对象初始化器: 初始化对象实例时,init通常和alloc(手动内存 ...

  8. jira使用

    JIRA的生产者把JIRA定义为Professional Issue Tracker,即它是一个专业的问题跟踪管理的软件.这里的"问题"对应的英文单词是Issue,所以含义比较广, ...

  9. centos6.5 升级python 到 python 2.7.11 安装 pip

    1.首先官方下载源码,然后安装(./configure,make all,make install,make clean,make distclean) 注意:需要先安装zlib-devel,open ...

  10. Symfony框架系列----常用命令

    一.常用命令 从Entity操作数据库: app/console doctrine:database:create # 创建数据库 app/console doctrine:schema:update ...