[js高手之路] html5 canvas系列教程 - 认识canvas以及基

作者:分分快三计划
 1 <script>
 2     window.onload = function () {
 3         var oCanvas = document.querySelector("#cv");
 4         console.log('canvas的默认宽度与高度:'   '宽度:'   oCanvas.width   ',高度:'   oCanvas.height);
 5     }
 6 </script>
 7 </head>
 8 <body>
 9 <script>
10 ;(function () {
11     var oCanvas = document.createElement("canvas");
12     oCanvas.setAttribute('id', 'cv');
13     oCanvas.width = '600';
14     oCanvas.height = '400'
15     document.body.appendChild(oCanvas);
16 })();
17 </script>
18 </body>

认识canvas的属性:宽度与高度

canvas的默认宽度与高度:宽度:300,高度:150

注意:canvas的宽度与高度,只能通过行间属性或者js动态修改,不要通过样式去修改,否则获取到的宽度与高度不准

canvas也可以通过js动态创建

如何使用canvas?

这样获取到的宽度与高度才是600px和400px.

通过样式修改canvas的宽度与高度分别为600px和400px,但是通过js通过获取到的却不是这个值,而是默认值。所以不要通过样式去修改,而应该通过设置行间属性或者js动态修改属性:

为什么要知道canvas的宽度与高度呢? 因为在动画和绘图制作的过程中,经常需要重绘操作,而重绘操作需要获取canvas的宽度与高度.

2,通过canvas获取他的上下文绘制环境( context )

3,结合javascript调用canvas的api进行图形绘制

 1 <script>
 2     window.onload = function(){
 3         var oCanvas = document.querySelector( "#cv" );
 4         console.log( 'canvas的默认宽度与高度:'   '宽度:'   oCanvas.width   ',高度:'   oCanvas.height );
 5     }
 6 </script>
 7 </head>
 8 <body>
 9     <canvas id="cv">你的浏览器不支持</canvas>
10 </body>

canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持。你可以参考这个网站,查看canvas的支持性:.

 1 <style>
 2 #cv {
 3     width:600px;
 4     height:400px;
 5 }
 6 </style>
 7 <script>
 8     window.onload = function(){
 9         var oCanvas = document.querySelector( "#cv" );
10         console.log( 'canvas的默认宽度与高度:'   '宽度:'   oCanvas.width   ',高度:'   oCanvas.height );
11     }
12 </script>

要使用canvas,一般都需要进行以下3步操作:

1,获取canvas对象( 通过选择器选择canvas元素 )

 1 <script>
 2     window.onload = function(){
 3         var oCanvas = document.querySelector( "#cv" );
 4         console.log( 'canvas的默认宽度与高度:'   '宽度:'   oCanvas.width   ',高度:'   oCanvas.height );
 5     }
 6 </script>
 7 </head>
 8 <body>
 9     <canvas id="cv" width="600" height="400">你的浏览器不支持</canvas>
10 </body>

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划