热门关键字:
jquery > jquery教程 > jquery教程 > html5中怎么利用canvas元素创建画布

html5中怎么利用canvas元素创建画布

370
作者:管理员
发布时间:2021/8/30 18:44:21
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5366
  1.创建一个canvas画布


  首先需要创建一个画布,那么创建画布的方法呢?


  画布的创建方法:指定id、width(画布宽度)、height(画布高度)。


  例如:<canvas id="canvas" width="500" height="350"></canvas>


  上面这个实例的意思就是,创建一个画布,长度为500,高度为350.


  2.引入绘画脚本


  引入脚本的方法:


  比如:<script type="text/javascript" src="canvas.js" charset="utf-8"></script>


  上面这个实例的意思就是:引入一个名为canvas的JS脚本,JS脚本的语言编码是utf-8


  3.使用draw函数进行绘画


  <!DOCTYPE html>


  <html>


  <head>


  <meta charset="UTF-8">


  <title></title>


  <script type="text/javascript" src="canvas.js"></script>


  </head>


  <body onload="draw('canvas');">


  <canvas id="canvas" width="500" height="350"></canvas>


  </body>


  </html>


  在body的属性里面,使用onload="draw('canvas');"语句。调用脚本文件中的draw函数进行图形绘画。


  第一步我们应该创建一个canvas画布


  <canvas id="canvas" width="500" height="350"></canvas>


  这样一个画布就创建完成了


  引入一个绘画脚本,head部分写上


  <script type="text/javascript" src="canvas.js"></script>


  这个canvas.js就是我们刚刚创建的脚本文件,这样这个绘画js就引入了。


  需要draw去进行函数的调用,使用draw函数进行绘制


  那么这个draw是在body属性中使用onload="draw('canvas');"这里body。


  <body onload="draw('canvas');">




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐