canvas 画布画太极图和钟表_html太极时钟-CSDN博客

本文链接：https://blog.csdn.net/qq_36801966/article/details/80902939

摘要：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 
  > 
 
 
  < 
  meta 
  charset= 
  "utf-8" 
   /> 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "IE=edge" 
  > 
 
 
  < 
  title 
  >绘制图形 
  </ 
  title 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1" 
  > 
 
 
  < 
  style 
  ></ 
  style 
  > 
 
 
  < 
  script 
  type= 
  "text/javascript" 
  src= 
  "canvasCase.js" 
  charset= 
  "utf-8" 
  ></ 
  script 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  onload= 
  " 
 
 
       draw0('canvas0'); 
 
 
       draw1('canvas1');  
 
 
   " 
  > 
 

 
      < 
  h2 
  >canvas元素使用示例-太极图 
  </ 
  h2 
  > 
 
 
      < 
  canvas 
  id= 
  "canvas0" 
  width= 
  "1000" 
  height= 
  "700" 
  ></ 
  canvas 
  > 
 
 
      < 
  h2 
  >canvas元素使用示例-钟表 
  </ 
  h2 
  > 
 