美文网首页
Canvas基础

Canvas基础

作者: 洛洛kkkkkk | 来源:发表于2017-04-20 19:25 被阅读0次
<!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>

相关文章

网友评论

      本文标题:Canvas基础

      本文链接:https://www.haomeiwen.com/subject/hgolzttx.html