菜单

循序渐进

    Java Oracle MySQL Bash Python Nginx Apache Redis MongoDB Git HTML Javascript Node CSS

最近来访

    html5系列.画布

    张嘉杰.原创 2014-09-20 html5

    <canvas>标签主要用于图形绘制,canvas通过javascript来绘制2D图形。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。在canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

    创建 Canvas 元素

    # 创建canvas标签
    <canvas id="myCanvas" width="400" height="400"></canvas>

    通过 JavaScript 来绘制

     
    
    // canvas 元素
    var canvas = document.body.appendChild(document.getElementById("myCanvas"));
    
    // 创建 context 对象
    var context = canvas.getContext("2d");
    
    // 创建图片对象
    var img = new Image();
    
    // 设置图片路径
    img.src = "http://www.jcore.cn/resources/images/demo/map.png";
    
    // 图片加载以后绘图,否则为空白图片
    img.onload = function(){
    	context.drawImage(img,0,0);
    }

    OK,今天就先说到这儿很简单,也很基础,下面有简单的例子 :)


    查看DEMO


    版权属于:jcore.cn

    原文地址:http://www.jcore.cn/2014/09/20/html5-series-canvas

    除非注明,文章均为原创,转载时必须以链接形式注明原始出处。

    分享文章到:

    热门推荐文章