一个练习canvas的小案例。其中若有小问题,欢迎大神拍砖……^_*

  代码效果预览地址:http://code.w3ctech.com/detail/2500

     <div class="container">
<canvas id="myCanvas" width="400" height="400" ></canvas>
</div>
         * {
padding:;
margin:;
} body {
background-color: #d5d3d4;
} .container {
width: 500px;
height: 500px;
position: relative;
top: 80px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 5px #c2bfbf;
}
#myCanvas{
border:1px solid #000;
position:relative;
top: 50px;
left: 50px;
transform:translate(-50%,-50%);
border-radius:50%;
animation: myfirst 30s linear infinite;
}
@keyframes myfirst
{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
         window.onload = function () {
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(200, 100, 100, -0.5 * Math.PI, 0.5 * Math.PI, false);
ctx.arc(200, 300, 100, 1.5 * Math.PI, 0.5 * Math.PI, true);
ctx.arc(200, 200, 200, 0.5 * Math.PI, 1.5 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill(); ctx.beginPath();
ctx.arc(200, 100, 25, 0 * Math.PI, 2 * Math.PI, false);
ctx.fillStyle = "white";
ctx.fill();
ctx.beginPath();
ctx.arc(200, 300, 25, 0 * Math.PI, 2 * Math.PI, false);
ctx.fillStyle = "black";
ctx.fill();
}

html 5 canvas 绘制太极demo的更多相关文章

  1. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  2. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  3. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  4. html5--5-14 阶段小练习:绘制太极图案

    html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这 ...

  5. 如何写成高性能的代码(一):巧用Canvas绘制电子表格

    一.什么是Canvas Canvas是HTML5的标签,是HTML5的一种新特性,又称画板.顾名思义,我们可以将其理解为一块画布,支持在上面绘制矩形.圆形等图形或logo等. 需要注意的是,与其他标签 ...

  6. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  7. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

随机推荐

  1. 枚举桌面应用程序lnk路径并得到对应程序的绝对路径(使用SHGetDesktopFolder函数枚举,然后使用COM查询IShellFolder,IShellLink和IPersistFile接口)

    // 枚举桌面上应用程序的lnk路径 void EnumDesktopLnkPath() { WCHAR szPath[MAX_PATH] = {0}; SHGetSpecialFolderPathW ...

  2. Visual Studio Support (DDEX)

    原文 VS2012,VS2013,and VS2015Pro+NpgsqlDdexProvider+EFv6 how to(by @kenjiuno) Reference: #213 Overview ...

  3. Spring与Hibernate整合

    Spring与Struts2整合的目的: 让Spring管理Action Spring整合Hinernate的目的: --管理SessionFactory(单例的),数据源 --声明式事务管理 1.首 ...

  4. 持久化框架Hibernate 开发实例(一)

    1 Hibernate简介 Hibernate框架是一个非常流行的持久化框架,其中在web开发中占据了非常重要的地位, Hibernate作为Web应用的底层,实现了对数据库操作的封装.HIberna ...

  5. 特殊的css样式

    在一定范围大小变化的div .div { width:auto; height:auto; min-height:100px; min-width:100px; max-height:200px; m ...

  6. WCF学习笔记之地址

    1.统一资源标识(URI) URI全称是Uniform Resource Identifier(统一资源标识),唯一地标识一个网络资源的同时也标识资源所处的位置以及访问方式(资源访问所用的网络协议). ...

  7. 1934. Black Spot(spfa)

    1934 水题 RE了N久 后来发现是无向图 #include <iostream> #include<cstring> #include<algorithm> # ...

  8. android.view.WindowManager$BadTokenException: Unable to add window -- token null is not for an application

      原博客地址:http://aijiawang-126-com.javaeye.com/blog/662336 在Activity中newSpinner是我把mContext传入,但是出了 andr ...

  9. fil_space_create

    /*******************************************************************//** Creates a space memory obje ...

  10. asp.net的decimal保留两位小数

    C#的decimal保留两位小数 方法一: decimal d = 46.28111; string dStr = Math.Round( d,2 ).ToString(); 结果:dStr = 46 ...