[js高手之路] html伍 canvas种类教程 – 认识canvas以及着力选拔格局

by admin on 2019年4月2日

canvas是html第55中学引入的2个新因素,俗称画布,既然是画布,当然是用来画图的。canvas技术指的是利用javascript操作canvas成分绘制图形的技艺,要利用canvas,一定要浏览器帮衬canvas,谷歌和火狐的协理性很好,IE八不扶助。你能够参见这些网址,查看canvas的协助性:http://www.caniuse.com/\#search=canvas,当然他还能查询到css3和html5等很多web新潮技术在各浏览器的支持性.

怎么使用canvas?

要运用canvas,一般都须要开展以下3步操作:

1,获取canvas对象( 通过采纳器选拔canvas成分 )

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

3,结合javascript调用canvas的api实行图纸绘制

认识canvas的质量:宽度与中度

canvas的默许宽度与中度:宽度:300,高度:150

 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的涨幅与中度呢?
因为在动画和制图制作的经过中,常常索要重绘操作,而重绘操作供给取得canvas的拉长率与中度.

小心:canvas的幅度与中度,只好通过行间属性或然js动态修改,不要通过体制去修改,不然获取到的大幅与中度不准

 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的小幅度与中度分别为600px和400px,不过通过js通过取获得的却不是其1值,而是暗中同意值。所以并非通过体制去修改,而相应经过设置行间属性或然js动态修改属性:

 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>

那样获取到的上涨幅度与高度才是600px和400px.

canvas也能够经过js动态创立

 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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图