[html5] 学习笔记-Canvas标签的使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[html5] 学习笔记-Canvas标签的使用相关的知识，希望对你有一定的参考价值。
Canvas通过javascript来绘制2D图形。Canvas是逐像素渲染的。在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何已被图形覆盖的对象。
1、Canvas标签
html5中<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成
<canvas>标签只是图形容器
可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图像
1.1 直接在html5中创建，这种方式采用得比较少
1 <DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .canvas{ 8 background-color: aqua; 9 } 10 </style> 11 </head> 12 <body> 13 <canvas class="canvas" id="canvas1" width="200px" height="200px"></canvas> 14 </body> 15 </html>
1.2 通过脚本创建
html文件：
1 <DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="app.js"></script> 8 <body> 9 </body> 10 </html>
其中使用到的app.js：
1 var CANVAS_WIDTH = 200, CANVAS_HEIGHT=200; 2 3 window.onload = function(){ 4 createCanvas(); 5 } 6 7 function createCanvas(){ 8 document.body.innerHTML = "<canvas id=\"mycanvas\" width = \""+CANVAS_WIDTH+"\" height = \""+CANVAS_HEIGHT+"\"></canvas>" 9 }
2、绘制图形
API的地址：https://developer.mozilla.org/zh-CN/ 进入后选择WEB平台的Web API & DOM
1 <DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="app.js"></script> 8 <body> 9 </body> 10 </html>
其中的app.js:
1 var CANVAS_WIDTH = 500, CANVAS_HEIGHT=500; 2 var mycanvas,context; 3 4 window.onload = function(){ 5 createCanvas(); 6 drawRect(); 7 } 8 9 function createCanvas(){ 10 document.body.innerHTML = "<canvas id=\"mycanvas\" width = \""+CANVAS_WIDTH+"\" height = \""+CANVAS_HEIGHT+"\"></canvas>" 11 mycanvas = document.getElementById("mycanvas"); 12 context = mycanvas.getContext("2d"); 13 } 14 15 function drawRect(){ 16 context.fillStyle="#ff0000"; 17 context.translate(200,200); 18 context.rotate(45); 19 context.scale(2,0.5); 20 context.fillRect(0,0,200,200); 21 }
3、绘制图片
将app.js中drawRect()的内容替换成以下即可：
1 var img = new Image(); 2 img.onload = function(){ 3 context.drawImage(img,0,0); 4 } 5 img.src="1.jpg";
以上是关于[html5] 学习笔记-Canvas标签的使用的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 Canvas 学习笔记（canvas绘制线条矩形多边形圆形圆环组合图形文字自定义图像）