JavaScript-Html-绘图-canvas基础

使用Html控件canvas，利用JavaScript自定义绘图

效果图如下：


<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="300" height="350" style="border:4px solid #000;"/>
        <script>            
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            
            // 1.画线段
            context.beginPath();
            context.moveTo(10,10);
            context.lineTo(280,10);
            context.lineWidth = 8;
            context.strokeStyle = "#00f";
            context.stroke();
            context.closePath();
            
            // 2.画圆框
            context.beginPath();
            context.arc(60,80,50,0,360,false);
            context.lineWidth = 4;
            context.strokeStyle = "#f00";
            context.stroke();
            context.closePath();        
            // 画实心圆
            context.beginPath();
            context.arc(60,180,50,0,360,false);
            context.fillStyle = "#00f";
            context.fill();
            context.closePath();
            
            // 3.画矩形框
            context.beginPath();
            context.strokeRect(150,40,100,50);
            context.closePath();            
            // 画实心矩形
            context.beginPath();
            context.fillRect(150,90,100,50);
            context.closePath();
            
            // 4.添加图片
            context.beginPath();
            var image = new Image();
            image.src = "http://avatar.csdn.net/5/3/C/1_qq_32115439.jpg";
            context.drawImage(image,150,160,100,100);
            context.closePath();
            
            // 5.添加文字
            context.beginPath();
            context.font = "60px 宋体";           
            context.fillText("lioil.win",10,320,280);
            context.closePath();
        </script>
    </body>
</html>

简书: http://www.jianshu.com/p/9e495ea9aea6
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/72582063
GitHub博客：http://lioil.win/2017/05/20/JS_Html_Canvas.html
Coding博客：http://c.lioil.win/2017/05/20/JS_Html_Canvas.html

JavaScript-Html-绘图-canvas基础

推荐阅读更多精彩内容