HTML5(1):画布(canvas)

最新推荐文章于 2024-09-11 17:25:08 发布

个人知识管理布道师

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量282

点赞数

分类专栏： HTML5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/u010689306/article/details/52123872

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!-- 告诉浏览器这是一个html5的网页 -->
<!DOCTYPE html>
<html>
  <head>
    <title>html5_canvas.html</title>
	    <!-- 网页的编码 -->
	    <meta charset="utf-8">
  </head>
  
  <body>
       <!-- 这是一个画布标签,我们在这个区域绘制图形 -->
       <canvas id="can1" width="500px" height="400px" style="border:1px solid red">     
       </canvas>
       
       <script type="text/javascript">
       //我们要在画布画出矩形
       //1 得到画布
       var canvas = document.getElementById("can1");
       //2 得到上下文环境,我们可以通过cxt这个对象来绘制图形
       //你也简单的理解,这个ctx就是画笔,ctx提供了很多绘制图形的方法
       //通过这些方法就可以绘制图形
       var ctx = canvas.getContext("2d");
       //alert(ctx); CanvasRenderingContext2D
       ctx.fillStyle="green";//改变颜色,红色
       ctx.fillRect(10,10,100,100);//画出一个矩形,默认是黑色               
       </script>
  </body>
</html>