[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& ...
随机推荐
- iOS 开源库
youtube下载神器:https://github.com/rg3/youtube-dl我擦咧 vim插件:https://github.com/Valloric/YouCompleteMevim插 ...
- http 响应头之location
<pre name="code" class="html">jrhmpt01:/root# cat login_yylc.pl use LWP::U ...
- hdoj 1114 Piggy-Bank(完全背包+dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 思路分析:该问题要求为多重背包问题,使用多重背包的解法即可:假设dp[v]表示容量为v的背包中能 ...
- Sonar入门学习
最近在学习Sonar,配置了好几天,才搭建起来环境,为自己的学习能力感到汗颜,赶紧在此记录一下,所谓好记性不如烂笔头. 1.Sonar介绍 Sonar是一个用于代码质量管理的开源平台,用于管理Java ...
- Android应用开发基础篇（3）-----ListView
一.概述 ListView是一个列表显示控件,它的应用非常广泛,在很多应用程序中都可以看到它的身影,比如来电通,网易新闻等等,特别是QQ.因此非常有必要熟练掌握它. 二.要求 能够利用ListView ...
- Cocos2d-x3.0游戏实例之《别救我》第四篇——乱入的主角
好了,前面说了那么多废话,最终要进入正题了(等等,敢情前面你都是在耍我们么?) 笨木头花心贡献,啥?花心?不呢,是用心~ 转载请注明,原文地址: http://www.benmutou.com/blo ...
- xcode 资源管理
我个人觉得这么理解就够了 其他的以后再说
- 今天碰到的angular 中的一个小坑
最近在自个儿研究angular,在写一个demo的时候总是有问题,最后发现居然是大小写的问题,卧槽 特tm的坑爹了,代码如下: <!DOCTYPE html> <html lang= ...
- SQL2000下修复某数据库的经历
某个SQL2000的数据库,在通过备份/还原的方法升级到2005时发生错误: 查找解决方法未果 正好最近在看 @一线码农 的<sql server之旅>,就想自己试试解决这个问题 首先运行 ...
- Unity UGUI在鼠标位置不同时 图片浮动效果
/// <summary> /// 在鼠标位置不同时 图片浮动效果 /// </summary> public class TiltWindow : MonoBehaviour ...