Canvas基础

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #myCanvas{
                border: 10px solid red;
                /*canvas的宽和高不能在样式表里设置*/
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="600"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");
        //直接用过属性width和height设置
//      myCanvas.width = 300;
//      myCanvas.height = 300;
        var context = myCanvas.getContext("2d");//存储对画布的操作的方法
        
        //开始绘制
        context.beginPath();
        //绘制的起点
        context.moveTo(50,50);
        //线的终点
        context.lineTo(300,300);
        //结束
//      context.closePath();
        //确定绘制线的颜色
        context.strokeStyle="red";
        //线的样式
        context.lineCap = "round";
        //线宽
        context.lineWidth = 10;
        //绘制
        context.stroke();
        
        
    </script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容