<!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.getElementByIdx_x_x_x("pic").getContext('2d');
//绘制白色半圆的代码如下：
ctx.beginPath();
ctx.arc(200,200,80,1.5*Math.PI,Math.PI/2,false);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill();
//绘制黑色半圆的代码如下：
ctx.beginPath();
ctx.arc(200,200,80,Math.PI/2,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;"></canvas>
</body>
</html>
分享到：
相关推荐
通过html5与css配合，做了一个简单的太极图，再做个动画旋转。给太极图做个背景，再做一个背景放大缩小的动画效果。最后实现一个旋转和放大缩小的太极图，都是html5和css最基础的应用实践。-逆战班
本项目“JS用Canvas绘制太极图”利用了HTML5的Canvas API，结合DCloud移动开发平台，实现了在移动APP和浏览器环境中展示动态的太极图案。 首先，让我们了解一下Canvas的基本概念。Canvas是一个HTML5元素，它的主要...
太极图用css进行绘画，主要利用css 免费
在本项目中，"html+css3实现可以旋转的太极图案效果.zip" 是一个包含HTML和CSS3技术的实现，用于创建一个动态旋转的太极图案的示例。这个压缩包可能还包括JavaScript，尤其是jQuery库，因为标签中提到了"jquery插件...
太极图可以用SVG的`<circle>`、`<path>`等元素绘制，然后通过改变`transform`属性中的`rotate`值实现旋转。SVG的优点在于，无论放大多少倍，图像质量都不会降低。 此外，CSS3的转换（Transform）和过渡（Transition...
在太极小程序中，HTML5的`<canvas>`元素可能是核心，它提供了一个画布，JavaScript可以在这上面绘制太极图。此外，HTML5的一些新特性，如离线存储、多媒体支持（音频、视频）和表单控件，可能会被用来增强用户体验。...
太极图通常由黑白两个半圆和中间的两条交叉线组成，这可以通过使用`border-radius`属性创建圆形，结合`linear-gradient`创建渐变色来实现。`border-radius`允许我们将元素的角落设置为圆形或椭圆形，而`linear-...
本主题探讨了如何利用这两种技术制作一个简单的直播插件以及太极图特效。这样的插件可以为网页添加互动性和视觉吸引力，尤其适用于在线教育、娱乐或企业展示等场景。 首先，HTML5是超文本标记语言的第五个版本，它...
在本项目"Google首页logo太极动画效果.zip"中，我们可以看到一个创新的实现，即Google首页Logo采用太极图的动态效果。这个项目涉及到前端开发的多个核心技术，包括CSS（层叠样式表）、JavaScript、jQuery以及HTML5。...
首先，我们需要创建HTML结构，它通常包括一个`<div>`元素作为太极图的容器，然后在其中包含两个半圆，分别代表黑色和白色的阴阳部分： ```html <div class="half black"></div> <div class="half white"></div> ...
此外，为了创建太极图的阴阳两极效果，我们可以利用background-image、background-position以及background-size属性，结合CSS3的渐变（gradient）来制作。线性渐变（linear-gradient）和径向渐变（radial-gradient）...
文档标题为“HarmonyOS应用开发-三方组件太极图案例”，这表明了该案例的核心是基于HarmonyOS平台的应用开发实践，主要涉及使用Canvas组件来绘制一个动态的太极图。文档描述同样提到“HarmonyOS应用开发-三方组件...
在`drawTaiChi`函数中，我们将绘制太极图的两个部分：黑色和白色的圆形。利用`arc`方法可以创建圆形，并通过`beginPath`和`fill`来填充颜色。 ```javascript function drawTaiChi(angle) { ctx.beginPath(); ctx....
效果图： 方法一： 复制代码代码如下:<!DOCTYPE HTML> <html> <body> ”myCanvas” width=”500″ height=”500″>your browser does not support the canvas tag</canvas> [removed] ...
基于html5和css3的动画、阴影和伪类等，实现不断旋转的太极图动画效果，响应式设计区分PC端和移动端的浏览效果，
这是一款很有趣的纯CSS3小动画，它是我们中国人都非常熟悉的阴阳太极图案，整个图案是利用纯CSS3绘制而成，而且更酷的是，这个太极图案还会不断旋转，看上去非常的神秘。而且这个旋转动画特效也是利用CSS3的动画属性...
为了完成太极图的绘制，代码中定义了蓝色和红色的固体画刷（SolidBrush），分别用它们来填充太极图中的黑白两部分。通过GraphicsPath和Arc函数定义了曲线路径，然后填充路径来完成太极图的主要形状。在太极图的两个...