HTML5程序设计 Canvas API

时间:2014-04-29 10:15:46   收藏:0   阅读:770

检测浏览器支持情况

mamicode.com,码迷
<script type="text/javascript">
            try
            {
                document.createElement("Canvas").getContext("2d");
                document.getElementById("support").innerHTML = "OK";
                
            }
            catch (e)
            {
                document.getElementById("support").innerHTML = e.message;
            }
        </script>
mamicode.com,码迷

加入Canvas

mamicode.com,码迷
<canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/>
mamicode.com,码迷

对角线

mamicode.com,码迷
 //取得Canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d"); //用绝对坐标来创建一条路径 context.beginPath(); context.moveTo(70, 140); context.lineTo(140, 70); //将这条线绘制到Canvas上 context.stroke();
mamicode.com,码迷

变换

可以通过变换(缩放、平移、旋转)等达到和上面相同的效果。

用变换的方式绘制对角线

mamicode.com,码迷
//取得Canvas元素及其绘图上下文
                var canvas = document.getElementById("diagonal");
                var context = canvas.getContext("2d");
                //保存当前绘图状态
                context.save();
                //向右下方移动绘图上下文
                context.translate(70, 140);
                //以原点为起点,绘制与前面相同的线段
                context.beginPath();
                context.moveTo(0, 0);
                context.lineTo(70, -70);
                context.stroke();

                context.restore();
mamicode.com,码迷

 路径

HTML5 Canvas API中的路径代表你希望呈现的任何形状。

beginPath():不论开始绘制何种图形,第一个需要调用的就是beginPath。这个简单的函数不带任何参数,它用来通知canvas将要开始绘制一个新的图形了。

moveTo(x,y):不绘制,将当前位置移动到新的目标坐标(x,y)。

lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。

closePath():这个函数行为和lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域,这对将来的填充和描边都非常有用。

绘制一个松树地树冠

mamicode.com,码迷
function createCanopyPath(context) {
                // Draw the tree canopy
                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(‘diagonal‘);
                var context = canvas.getContext(‘2d‘);

                context.save();
                context.translate(130, 250);

                // 创建表现树冠的路径
                createCanopyPath(context);

                // 绘制当前路径
                context.stroke();
                context.restore();
            }

            window.addEventListener("load", drawTrails, true);
mamicode.com,码迷

描边样式

通过描边模式,可以让树冠看起来更加真实。

mamicode.com,码迷
//加宽线条
                context.lineWidth = 4;
                //平滑路径的接合点
                context.lineJoin = ‘round‘;
                //颜色
                context.strokeStyle = ‘#663300‘;
                // 绘制当前路径
                context.stroke();
mamicode.com,码迷

填充样式

mamicode.com,码迷
context.fillStyle = "#339900";
                context.fill();
mamicode.com,码迷

绘制矩形

我们给树增加树干

mamicode.com,码迷
               context.fillStyle = ‘#663300‘;
                context.fillRect(-5, -50, 10, 50);
mamicode.com,码迷

绘制曲线

mamicode.com,码迷
context.save();
                context.translate(-10, 350);
                context.beginPath();

                // 第一条曲线向右上方弯曲
                context.moveTo(0, 0);
                context.quadraticCurveTo(170, -50, 260, -190);

                // 向右下方弯曲
                context.quadraticCurveTo(310, -250, 410, -250);

                // Draw the path in a wide brown stroke
                context.strokeStyle = ‘#663300‘;
                context.lineWidth = 20;
                context.stroke();

                // Restore the previous canvas state
                context.restore();
mamicode.com,码迷

 

HTML5程序设计 Canvas API,码迷,mamicode.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!