[html5] 学习笔记-Canvas标签的使用

时间：2022-08-10 23:46:59

Canvas通过JavaScript来绘制2D图形。Canvas是逐像素渲染的。在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何已被图形覆盖的对象。

1、Canvas标签

html5中<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成

<canvas>标签只是图形容器

可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图像

1.1 直接在html5中创建，这种方式采用得比较少

 <DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         .canvas{
             background-color: aqua;
         }
     </style>
 </head>
 <body>
     <canvas class="canvas" id="canvas1" width="200px" height="200px"></canvas>
 </body>
 </html>

1.2 通过脚本创建

html文件：

 <DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
     <script src="app.js"></script>
 <body>
 </body>
 </html>

其中使用到的app.js：

 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>"
 }

2、绘制图形

API的地址：https://developer.mozilla.org/zh-CN/   进入后选择WEB平台的Web API & DOM

 <DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
     <script src="app.js"></script>
 <body>
 </body>
 </html>

其中的app.js:

 var CANVAS_WIDTH = 500, CANVAS_HEIGHT=500;
 var mycanvas,context;

 window.onload = function(){
     createCanvas();
     drawRect();
 }

 function createCanvas(){
     document.body.innerHTML = "<canvas id=\"mycanvas\" width = \""+CANVAS_WIDTH+"\"  height = \""+CANVAS_HEIGHT+"\"></canvas>"
     mycanvas = document.getElementById("mycanvas");
     context = mycanvas.getContext("2d");
 }

 function drawRect(){
     context.fillStyle="#ff0000";
     context.translate(200,200);
     context.rotate(45);
     context.scale(2,0.5);
     context.fillRect(0,0,200,200);
 }

3、绘制图片

将app.js中drawRect()的内容替换成以下即可：

     var img = new Image();
     img.onload = function(){
         context.drawImage(img,0,0);
     }
     img.src="1.jpg";

相关文章