canvas 画布的简单应用

 

    <canvas id="canvas" width="200" height="100"></canvas>
        
     1, 用canvas画线  
            window.onload = function() {
                var canvas = document.getElementById("canvas")
                var ctx = canvas.getContext('2d')

                ctx.moveTo(0, 0) //起点
                ctx.lineTo(20, 20) //终点

                ctx.lineWidth = "2" //线宽
                ctx.strokeStyle = "red"; //线的颜色
                ctx.stroke(); //结束

            }

              

      2, 用canvas画圆形  

     window.onload = function() {

                var canvas = document.getElementById("canvas")
                var ctx = canvas.getContext('2d')

                ctx.strokeStyle = "red";//线的颜色
                ctx.arc(200, 200, 100,1, 1*Math.PI) //s画圆形 
                ctx.stroke();

           }
 

3,用canvas 画矩形

    window.onload = function() {
                var canvas = document.getElementById("canvas")
                var ctx = canvas.getContext('2d')
                ctx.strokeStyle = "red";
                ctx.fillRect(20,20,300,300) //填充矩形
                ctx.rect(20,20,300,300)//画矩形
                ctx.stroke();
                
        }