Html5 Canvas （1）
|
Html5中定义了Canvas元素，可以在Canvas中绘制路径，各种图形，字符以及添加图片。 1.创建Canvas <canvas id="c" height="200" width="150"></canvas> 2.通过JS绘制图形 <script type="text/javascript"> var c = document.getElementById('c');//取得Dom元素 var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染 context.fillStyle = "#000000";//填充颜色 context.fillRect(10,10,60,40); //绘制矩形 </script> 3.替换内容 并不是所有的浏览器都支持canvas ，如果不支持浏览器会忽略掉canvas元素直接渲染替换的内容 <canvas id="c" height="200" width="150"> This is a canvas //替换的内容 </canvas> 4.检查浏览器支持 <script type="text/javascript"> var c = document.getElementById('c'); if(c.getContext){ var context = c.getContext('2d'); ... ... } </script> 5.一个简单的例子 <!DOCTYPE HTML> <html> <head> <title>Html5 Canvas</title> </head> <body>
<canvas id="c" height="200" width="150"></canvas>
<script type="text/javascript"> var c = document.getElementById('c');//取得Dom元素 var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染 context.fillStyle = "#000000";//填充颜色 context.fillRect(10,10,60,40); //绘制矩形 </script>
</body> </html> 6.Html5 Canvas API http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
7.一些简单方法 fillStyle 可以设置填充色 context . fillStyle [ = value ] strokeStyle 设置画笔的颜色 context . strokeStyle [ = value ] fillRect 画一个矩形 用fillStyle来填充 strokeRect 画一个矩形 不填充 clearRect 清除矩形区域的像素 context . clearRect(x, y, w, h) Clears all pixels on the canvas in the given rectangle to transparent black. context . fillRect(x, y, w, h)Paints the given rectangle onto the canvas, using the current fill style. context . strokeRect(x, y, w, h)Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.
8.路径用法 路径可以想象成用铅笔画画 moveTo(x,y) 将铅笔移动到指定点作为起始点 lineTo(x,y) 画线到指定的结束点 先画一个网格 //画竖线 for(var x=0.5;x<800;x+10){ context.moveTo(x,0); context.lineTo(x,600); } //画横线 for(var y=0.5;y<600;y+10){ context.moveTo(0,y); context.lineTo(800,y); } 一个例子 网格 <!DOCTYPE HTML> <html> <head> <title>Html5 Canvas Path Grids</title> </head> <body>
<canvas id="c" height="600" width="850"></canvas>
<script type="text/javascript"> //画竖线 var c = document.getElementById("c"); var context = c.getContext("2d");
for(var x=0.5;x<800;x += 10){ context.moveTo(x,0); context.lineTo(x,600); } //画横线 for(var y=0.5;y<600;y += 10){ context.moveTo(0,y); context.lineTo(800,y); } //选择颜色 context.strokeStyle = "#ccc"; //渲染 context.stroke(); </script>
</body> </html>
9.路径的API
context . beginPath()
Resets the current path. context . closePath()Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath. context . lineTo(x, y)Adds the given point to the current subpath, connected to the previous point by a straight line. context . moveTo(x, y)Creates a new subpath with the given point as its first (and only) point. context . stroke()Creates the strokes of the subpaths with the current stroke style. |
