canvas元素的认识

在DOM接口中有:

————————————————————————————————————–

interface CanvasElement : Element { attribute unsigned long width; attribute unsigned long height;

Object getContext(in DOMString contextId);

DOMString toDataURL(optional in DOMString type, in any args); };

————————————————————————————————————-

 

这里的width和height必须是非负值,并且在width和被重新复制的时候,画布中已经存在的对象将被消除。

输入代码:

———————————————————————————————————–

<!DOCTYPE HTML> < html> < head> < meta charset=”utf-8″> < title>html5画飞机</title> < style> canvas {display: block; margin: 20px auto; border: 1px solid #333} < /style> < /head>

<script> window.onload = function(){ var canvas = document.getElementById(“myCanvas”); var context = canvas.getContext(“2d”); alert(canvas.getAttribute(“width”)); context.fillRect(0,0,50,50); canvas.setAttribute(‘width’, ’400′); // 清楚canvas context.fillRect(0,100,50,50); canvas.width = canvas.width;         // 清楚canvas context.fillRect(100,0,50,50); }; < /script>

<body> < canvas id=”myCanvas” width=”800px” height=”200px”></canvas> < /body> < /html>

——————————————————————————————————–

共有 0 条评论

Top