canvas 画布画太极图和钟表

摘要：html5的canvas元素称得上是html5的核心技术，而作为一个依靠js绘制华丽图像的元素，Canvas究竟能够运用在哪些方面的开发？

相关代码

什么是Canvas？

Canvas元素是h5的一部分，允许脚本语言动态渲染图像。canvas由一个可绘制地区html代码中的属性定义决定高度和宽度。js代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的APU，从而生成动态的图形

我们能用Canvas做什么

1、游戏

毫无疑问，游戏在h5领域具有举足轻重的地位。h5在基于web的图像显示方面比flash更加立体、更加精巧

2、图表

图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，但大家完全可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。

小栗子：

画图形

<!DOCTYPE html>

<html>

<head>

</head>

<body onload="

draw0('canvas0');

draw1('canvas1');

<h2>canvas元素使用示例-太极图</h2>

<h2>canvas元素使用示例-钟表</h2>

<h2>canvas元素使用示例-拆线图</h2>

</body>

</html>

<!--

canvasCase.js文件

// 画太极图

function draw0(id){

var canvas = document.getElementById(id);

if(canvas == null){

return false;

}

canvas.width = 1000;

canvas.height = 500;

var context = canvas.getContext('2d');

context.arc(300,300,200, 0, Math.PI* 2);

context.fillStyle = '#000';

context.fill();

context.strokeStyle = '#ccc';

context.stroke();

// 画另一个大圆

// 重置

context.beginPath();

context.arc(300, 300, 200, 1.5 * Math.PI, 0.5 * Math.PI);

context.fillStyle = '#fff';

context.fill();

context.stroke();

// 画另一个圆

// 重置

context.beginPath();

context.arc(300, 200, 100, 0, 2 * Math.PI);

context.fillStyle = '#000';

context.fill();

context.strokeStyle = '#000';

context.stroke();

// 画另一个圆

// 重置

context.beginPath();

context.arc(300, 400, 100, 0, 2 * Math.PI);

context.fillStyle = '#fff';

context.fill();

context.strokeStyle = '#fff';

context.stroke();

// 画另一个圆

// 重置

context.beginPath();

context.arc(300, 200, 50, 0, 2 * Math.PI);

context.fillStyle = '#fff';

context.fill();

context.strokeStyle = '#fff';

context.stroke();

// 画另一个圆

// 重置

context.beginPath();

context.arc(300, 400, 50, 0, 2 * Math.PI);

context.fillStyle = '#000';

context.fill();

context.strokeStyle = '#000';

context.stroke();

}

// 画钟表

var canvas1 = "",

context1 = "";

function draw1(id = 'canvas1'){

var canvas1 = document.getElementById(id);

if(canvas1 == null){

return false;

}

canvas1.width = 1000;

canvas1.height = 500;

var context1 = canvas1.getContext('2d');

var x = 210,

y = 210,

r = 200,

date = new Date(),

hours = date.getHours(),

minutes = date.getMinutes(),

seconds = date.getSeconds();

var h = (-90 + hours* 30 + (minutes / 2)) * Math.PI / 180,

m = (-90 + minutes* 6 + (seconds / 10)) * Math.PI / 180,

s = (-90 + seconds* 6) * Math.PI / 180;

context1.beginPath();

context1.arc(x, y, r, 0, 360 * Math.PI / 180);

context1.fillStyle = '#fff';

context1.fill();

context1.strokeStyle = '#ccc';

context1.stroke();

context1.closePath();

// 分针

context1.beginPath();

for(var i = 0; i < 60; i ++){

context1.moveTo(x, y);

context1.arc(

i * 6 * Math.PI/180,

(i + 1)*6 * Math.PI/180);

}

context1.fillStyle = "#000";

context1.stroke();

context1.beginPath();

context1.arc(x, y, r*(18/20), 0, 2 * Math.PI);

context1.fillStyle = '#fff';

context1.fill();

context1.strokeStyle = "#fff";

context1.stroke();

//context.closePath();

// 时针

context1.beginPath();

for(var i = 0; i < 12; i ++){

context1.moveTo(x, y);

context1.arc(

i * 30 * Math.PI/180,

(i + 1)*30 * Math.PI/180);

}

context1.lineWidth = 3;

context1.strokeStyle = "#000";

context1.stroke();

context1.beginPath();

context1.arc(x, y, r*(16/20), 0, 2 * Math.PI);

context1.fillStyle = '#fff';

context1.fill();

context1.strokeStyle = "#fff";

context1.stroke();

// 画时分秒线

// 时

context1.beginPath();

context1.moveTo(x, y);

context1.arc(x, y, r*(10/20), h, h);

context1.lineWidth = 5;

context1.strokeStyle = '#000';

context1.stroke();

// 分

context1.beginPath();

context1.moveTo(x, y);

context1.arc(x, y, r*(12/20), m, m);

context1.lineWidth = 3;

context1.strokeStyle = '#000';

context1.stroke();

// 秒

context1.beginPath();

context1.moveTo(x, y);

context1.arc(x, y, r*(14/20), s, s);

context1.lineWidth = 1;

context1.strokeStyle = '#000';

context1.stroke();

}

draw1();

setInterval(draw1, 1000);

canvas 画布画太极图和钟表相关推荐

Canvas画布完成一个数字钟表
Canvas最初由苹果推出,后来由W3C推广,目前几乎所有浏览器都支持Canvas. canvas是一个闭合标签,包括宽度和高度属性.默认值为宽300,高150.浏览器不支持canvas时,canva ...
用canvas画布画时钟
canvas canvas简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形 ...
html画布动漫人物,canvas画布画卡通人物--哆啦A梦
#canvas1 {background-color: #5F9EA0;} var can = document.getElementById("canvas1"); var pe ...
html5 画太极图,canvas基础画太极图(娱乐~)
太极 .canvas{ animation: scroll1 3s linear infinite; } @keyframes scroll1{ 0%{ transform: rotateZ(0deg ...
利用canvas画布画哆啦A梦
简易版哆啦A梦源代码: <!DOCTYPE html> <html><head><title>哆啦A梦</title><meta ch ...
利用canvas画布和rotate()方法让画的图形旋转起来
上一篇讲了利用canvas画布画太极图,这一篇说的是让太极图旋转起来. **思路:**利用HTML DOM 的setInterval()方法,它会按照指定的周期来调用函数或计算表达式.再利用画布的ro ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
用python 之turtle库（模块）画太极图、楼梯等
用python 之turtle库(模块)画太极图.楼梯等画简易的太极图代码如下: import turtle t=turtle.Turtle() t.up() t.goto(0,-50)#设置起始 ...
canvas画布会黑屏吗_Android SurfaceView 黑屏问题
说一个真实的案例.其中需求要做一个绘图功能,一听到绘图,自然而然就像到了SurfaceView这个类.所以我就用了. android:layout_width="match_parent&q ...

canvas 画布画太极图和钟表

canvas 画布画太极图和钟表相关推荐

最新文章

热门文章