画布（一）

1.画布的标签是canvas，对于一些老的浏览器，他们不支持html5的画布，我们在做开发的时候一般要先判断浏览器是否支持画布；判断代码如下

try{
document.createElement("canvas").getContext("2d");
alert("Your browser support canvas");//支持画布的输出

}catch(e){
alert("Your browser do not support canvas,You can update it");//不支持的输出
}

结果如下：

（1）ie8的测试结果：

（2）FireFox最新版测试结果:

2,其实html5和html4大部分还是相似的，比如下面代码，我们看到很多相似的地方，结合css在页面上画一个带边框的画布:

<!DOCTYPE html>
<html>
   <body>
       <canvas id="one" style="border:1px solid;" width="200" height="200"></canvas>
   </body>
</html>

运行结果:

3，在以上定义的画布中画一条对角线：

结果：

html5的节点操作依然需要javascript来支撑，所以，要做出很好的客户端，javascript依然是必须掌握的技术，并且必须很好的掌握。

4,画一棵树:

<canvas id="trails" style="border: 1px solid;" width="300" height="300"> </canvas>
<script>
        function createCanopyPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);
            context.lineTo(0, -140);
            context.lineTo(15, -110);
            context.lineTo(5, -110);
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
           //该函数会把画过的区域闭合
            context.closePath();
        }

        function drawTrails() {
            var canvas = document.getElementById('trails');
            var context = canvas.getContext('2d');
           //保存当前的画图状态
            context.save();
           //为画布的变换矩阵添加水平的和垂直的偏移
            context.translate(130, 250);
            //画一个数
            createCanopyPath(context);
            // Stroke the current path
            context.stroke();
           //将画布的状态恢复到之前保存的那个状态
            context.restore();
        }
        window.addEventListener("load", drawTrails, true);
</script>

运行结果:

5，为上面这棵树加一些样式:

//加宽线条
           context.lineWidth = 4;
           //平滑路劲结合点
           context.lineJoin = 'round';
           //将颜色改为棕色
           context.strokeStyle = 'green';
            context.stroke();

结果:

6,对于曲线绘制，不太常用，并且也很简单，如果遇到了，可以自己阅读API

7,在面板中放入一幅画:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>加载图片到画板</title>
       <script>
           window.onload=function(){
               var myCanvas = document.getElementById("myCanvas");
               //下面开始加载一张图片
               var bark = new Image();
               bark.src="bark.jpg";
               //必须要等普片加载完了以后才能进行下面的操作
               bark.onload = function(){
                   var context = myCanvas.getContext('2d');
                   //将普片画在面板中
                   context.drawImage(bark,0,0);
               };
           };
       </script>
   </head>
   <body>
       <canvas id = 'myCanvas' width='625' height='384'></canvas>
   </body>
</html>

结果：

8，渐变的效果:

(1),使用createLinearGradient(xStart,yStart,xEnd,yEnd)

(2),设置渐变颜色

(3),填充样式

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8"/>
       <title>加载图片到画板</title>
       <script>
           window.onload=function(){
               var myCanvas = document.getElementById("myCanvas");
               //下面开始加载一张图片
               var context = myCanvas.getContext('2d');
               //(1)先创建一个渐变
               var gradient = context.createLinearGradient(0, 0, 625, 0);
               //(2)使用addColorStop(x, y, color)方法来设定渐变中某一个点的颜色
               gradient.addColorStop(0, "#663300");
               gradient.addColorStop(0.5, "#996600");
               gradient.addColorStop(1, "#552200");

               context.fillStyle = gradient;

               context.fillRect(0,0,625,384);
               context.fill();
           };
       </script>
   </head>
   <body>
       <canvas id = 'myCanvas' width='625' height='384' style="border:1px solid"></canvas>
   </body>
</html>

结果：

9，在画布中用scale(2,2)函数来吧画布中接下来操作的元素都宽和高同时放大两倍。

posted on 2011-12-22 14:26 程序员小威阅读(188) 评论(0) 收藏举报

刷新页面返回顶部

程序员小威

导航

公告

画布（一）