canvas初级示例

系统管理员 2022-08-02 06:11 160阅读 0赞

<!DOCTYPE HTML>     
    <html>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <script>    
        window.onload = function()    
        \{    
            var myCanvas = document.getElementById("myCanvas");    
            var context = myCanvas.getContext("2d");    
            context.strokeStyle = "blue";    
            context.lineWidth = 3;    
            //开始画线  
            context.beginPath();    
            //画矩形  
            context.strokeRect(0,0,300,300);  
            //开始画线  
            context.beginPath();  
            //笔触颜色  
            context.strokeStyle = "red";    
            //画线起点  
            context.moveTo(50,50);    
            //画线终点  
            context.lineTo(100,100);  
            //绘制当前路径  
            context.stroke();              
   
            context.beginPath();  
            context.strokeStyle = "green";    
            context.lineWidth = 3.5;    
            context.moveTo(100,100);              
            context.lineTo(200,150);  
            context.lineTo(200,80);  
            context.stroke();

//文字示例

context.strokeStyle = "red";    
            context.lineWidth = 1;    
            context.strokeText("世界你好", 110, 200);  
        \}    
    </script>    
    <canvas id=myCanvas width=300 height=300>你的浏览器不支持canvas</canvas>    
    </html>