[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& ...
随机推荐
- ZOJ Monthly, March 2013
A题 题目大意:给出一棵树,一开始节点值均为0,先要求完成在线操作:将某子树所有节点值取反,或者查询某子树总点权. 题解:很基础的线段树题,既然两个操作都是子树操作,那么就先树链剖分一下,将子树操作转 ...
- Stitch Fix 融资1200万美元，又一个时尚创业的哈佛女MBA |华丽志
Stitch Fix 融资1200万美元,又一个时尚创业的哈佛女MBA |华丽志 Stitch Fix 融资1200万美元,又一个时尚创业的哈佛女MBA
- stringstream字符串流
例题详解 題目:输入的第一行有一个数字 N 代表接下來有 N 行資料,每一行資料里有不固定個數的整數(最多 20 個,每行最大 200 個字元),請你寫一個程式將每行的总和印出來. 輸入: 3 1 2 ...
- 使用COCOS2D-X JSB开发，在js页面中设置iOS键盘模式
XYSDK.h void setKeyboardType(int type); XYSDK.cpp voidXYSDK::setKeyboardType(int type) { #if (CC_TAR ...
- android技术牛人的博客[转]
Android+JNI调用–文件操作 开发环境:Windows xp sp3 +MyEclipse 8.6+android2.3.3+jdk1.6+android-ndk-r6b JNI概述: ...
- SASS组件开发
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- 最大值减去最小值小于或等于num的子数组数量
[说明]: 本文是左程云老师所著的<程序员面试代码指南>第一章中“最大值减去最小值小于或等于num的子数组数量”这一题目的C++复现. 本文只包含问题描述.C++代码的实现以及简单的思路, ...
- Set 与 Multiset
Set 与 Multiset 会根据待定的排序准则,自动将元素排序,两者不同之处在于前者不允许元素重复,后者允许,下面介绍一下set中的函数: 一.set 中的 begin.end.rbegin.re ...
- c# 迭代器 与 集合 IEnumerable.GetEnumerator 方法
示例来源 :msdn 参考:https://msdn.microsoft.com/zh-cn/library/dscyy5s0(v=vs.110).aspx 使用匿名方法.迭代器和部分选件类创建简洁的 ...
- php平均拆分大文件为N个小文件
用PHP程序拆分大文件为N个小文件 /* 假设有文件data.log , 内容如下,行数很多,假设有上亿条数据,文件大小大概在800M左右 92735290 80334472 49114074 871 ...