在html5 中把canvas标签写在<body>中而jsp代码写在<head>中就会出错呢

Posted 2023-04-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在html5 中把canvas标签写在<body>中而jsp代码写在<head>中就会出错呢相关的知识，希望对你有一定的参考价值。

本人亲测，放在head中和外部js中全部失效，只有放在body中才能正常显示，首先需要明确的一点是放在head中的js并不会自动执行，除非您亲自调用，而放在body中的会自动执行，所以你如果想放在head中，那么请把它包在一个function中，并在window.onload函数调用即可。如果是外部js，也是不会自动执行，两种方法，一种是放在JQ的ready中，一种同head。参考技术A 把代码贴出来看看。追问

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

[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标签写在<body>中而jsp代码写在<head>中就会出错呢的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 - Canvas标签<使用;

HTML5：Canvas 标签

html5 canvas 标签

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

HTML5 - Canvas标签<介绍;

HTML5 canvas绘图基本使用方法

在html5 中把canvas标签写在<body>中 而jsp代码写在<head>中就会出错呢

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

在html5 中把canvas标签写在<body>中而jsp代码写在<head>中就会出错呢