zoukankan      html  css  js  c++  java
  • 绘制线段

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                #canvas1{
                    margin: 0 auto;
                    /*background: #efefef;*/
                    display: block;
                    border: 1px solid #aaa;
                    /* 600px;
                    height: 400px;*/
                }
            </style>
        </head>
        <body>
            <canvas id="canvas1" width="600" height="400">
                你的浏览器不支持canvas
            </canvas>
            
            
            <script type="text/javascript">
            //找到要设置的画布
                var canvas1 = document.querySelector('#canvas1')
            //能够对这个画布画画的对象,就是画笔,canvas1的上下文对象
                var ctx = canvas1.getContext('2d')
                
                //绘制线段
                ctx.beginPath()
                
                //设置直线路径
                   ctx.moveTo(100,100)
                ctx.lineTo(200,200)
                ctx.lineTo(200,300)
                ctx.lineTo(100,100)
                //路径绘制出来
                
                ctx.lineWidth = 10
                //起始点的路径的边缘的样式
                ctx.lineCap = 'round'
                //线段的连接处样式
                ctx.lineJoin = 'round'
                ctx.strokeStyle = 'salmon'
                ctx.stroke()
               
    //            ctx.fillStyle = 'silver'
    //            ctx.fill()
                ctx.closePath()
                
                
                //绘制圆
                ctx.beginPath()
                //ctx.arc(水平坐标,垂直坐标,半径,开始角度(弧度制),结束角度,是否逆时针)
                ctx.arc(300,300,50,0,Math.PI/2,false)
                
                ctx.stroke()
                ctx.fill()
                ctx.closePath()
                
                
                
                
                
                
                
                
                
                
            </script>
            
        </body>
    </html>
  • 相关阅读:
    $(window).scrollTop()与$(dom).offset().top
    组织结构图
    杀人游戏
    猜数字游戏
    变量
    2018 -11-23 快捷键
    iOS开发—c语言 ATM取款机(全)2018-11-15
    iOS开发—c语言 ATM取款机(一)
    ios开发学习c语言第一天 2018-11-13
    iOS 面试题
  • 原文地址:https://www.cnblogs.com/wwthuanyu/p/10555373.html
Copyright © 2011-2022 走看看