HTML5——Canvas基本介绍

最新推荐文章于 2021-07-27 17:20:24 发布

唐小狼

最新推荐文章于 2021-07-27 17:20:24 发布

阅读量436

点赞数

分类专栏： html 前端工程师学习笔记 HTML5

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/51329432

版权

前端工程师学习笔记同时被 3 个专栏收录

85 篇文章 0 订阅

订阅专栏

html

26 篇文章 0 订阅

订阅专栏

HTML5

20 篇文章 0 订阅

订阅专栏

1、Canvas标签

HTML5<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成。<canvas>标签只是图形容器，你必须使用脚本来绘制图形。可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图形。

2、标签创建

<canvas>

(1)脚本创建：

 
 
  
  
   
   <!DOCTYPE html>
  
  
  
  
   
   <html lang="en">
  
  
  
  
   
   <head>
  
  
  
  
   
       <meta charset="UTF-8">
  
  
  
  
   
       <title>canvas</title>
  
  
  
  
   
       <!--<style>
  
  
  
  
   
           .canvas{
  
  
  
  
   
               width: 200px;
  
  
  
  
   
               height: 200px;
  
  
  
  
   
               background-color: aqua;
  
  
  
  
   
           }
  
  
  
  
   
       </style>-->
  
  
  
  
   
       <script src="app.js"></script>
  
  
  
  
   
   </head>
  
  
  
  
   
   <body>
  
  
  
  
   
       <!--<canvas class="canvas"></canvas>-->
  
  
  
  
   
   </body>
  
  
  
  
   
   </html>

 
 
  
  
   
   var CANVAS_WIDTH = 200, CANVAS_HEIGHT= 200;
  
  
  
  
   
   window.onload = function () {
  
  
  
  
   
       createCanvas();
  
  
  
  
   
   }
  
  
  
  
   
    
  
  
  
  
   
   function createCanvas() {
  
  
  
  
   
       document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>"
  
  
  
  
   
   }

唐小狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5——Canvas基本介绍

1、Canvas标签HTML5元素用于图形的绘制，通过脚本（通常是JavaScript）来完成。标签只是图形容器，你必须使用脚本来绘制图形。可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图形。2、标签创建(1)脚本创建： lang="en"> charset="UTF-8"> canvas .canvas{
复制链接

扫一扫