风骚的 Canvas

2.1 canvas中的直线图形

正确认识 Canvas中的坐标系：

Canvas坐标系采用的是W3C坐标系：Y轴正方向向下
普通的数学坐标系： Y轴正方向向上

如下图所示：

这一点需要重点理解。

2.1.1 直线的绘制

API:

moveTo(x,y): 定义画笔的起始位置，X对应画笔在canvas中的x轴坐标，y值对应y轴坐标。
lineTo(x,y): 表示将画笔从某一个点移动到另一个点，相当于将画笔从起始点绘制到当前点
stroke：将所定义的点链接起来

单条直线的绘制

    <body>
    <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    
    <script>
        window.onload = function() {
            var canvas = document.getElementById('canvas')
            
            var ctx = canvas.getContext('2d')

            ctx.moveTo(50,50)
            ctx.lineTo(100,100)
            ctx.stroke()
        }
    </script>
</body>

浏览器中的预览效果

多条直线的绘制

    <body>
    <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    
    <script>
        window.onload = function() {
            var canvas = document.getElementById('canvas')
            
            var ctx = canvas.getContext('2d')

            ctx.moveTo(50,50)
            ctx.lineTo(100,100)
            ctx.moveTo(50,50)
            ctx.lineTo(50,100)
            ctx.stroke()
        }
    </script>
</body>

浏览器中的预览效果

思考：将第二个moveTo(50,50)去掉则会产生的效果是什么？

2.1.2 三角形的绘制

    <body>
    <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    
    <script>
        window.onload = function() {
            var canvas = document.getElementById('canvas')
            
            var ctx = canvas.getContext('2d')

            ctx.moveTo(50,50)
            ctx.lineTo(100,100)
            ctx.moveTo(50,50)
            ctx.lineTo(50,100)
            ctx.lineTo(100,100)
            ctx.stroke()
        }
    </script>
</body>

浏览器中的预览效果

2.1.3 矩形的绘制

方法一:普通方法绘制

使用moveTo 与 lineTo 绘制四个点，然后使用stroke()进行绘制

   <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    <script>
        window.onload = function() {
            var canvas = document.getElementById('canvas')
            
            var ctx = canvas.getContext('2d')
           
            ctx.moveTo(50,50)
            ctx.lineTo(50,100)
            ctx.lineTo(100,100)
            ctx.lineTo(100,50)
            ctx.lineTo(50,50)
            ctx.stroke()
        }
    </script>

浏览器中的预览效果

方法二:描边矩形

API:

strokeStyle = 属性值：strokeStyle 用于定义画笔描边的样式，取值有三种，即颜色值、渐变色、图案
strokeRect(X,Y,width,height): strokeRect()方法用于确定矩形的坐标，其中x和y为矩形最左上角的坐标。注意，凡是对于Canvas中的坐标，一定要根据W3C坐标系来理解。此外width表示矩形的宽度，height表示矩形的高度，默认情况下width和height都是以px为单位的。

如图：

    
    <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    <script>
        window.onload = function() {
            var rect = document.getElementById('canvas')
            
            var ctx = rect.getContext('2d')
            
            ctx.strokeStyle = "red"
            ctx.strokeRect(50,50,100,200)
        }
    </script>

浏览器中的预览效果

注意事项：在使用strokeRect方法之前应使用strokeStyle定义画笔的样式，如果颠倒二者的位置的话则没有效果，在“画strokeRect()之前一定要把应有的参数（如strokeStyle）,就像是画之前画笔应该现有颜色才能画出图案，没有颜色的画笔无法画出任何图案.

方法三：填充矩形

API：

fillStyle = 属性：类似与strokeStyle 一样取值有三种，即颜色值、渐变色、图案，不同之处在于 storkeStyle 用于描边而 fillStyle则用于填充内部样式。
fillRect : fillRect()方法跟strokeRect()方法一样，用于确定矩形的坐标，其中x和y为矩形最左上角的坐标，width表示矩形的宽度，height表示矩形的高度。

跟描边矩形一样，填充矩形的fillStyle属性也必须在fillRect()方法之前定义，否则fillStyle属性无效。

    
    <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    <script>
        window.onload = function() {
            var rect = document.getElementById('canvas')
            var ctx = rect.getContext('2d')

            ctx.fillStyle = "pink"
            ctx.fillRect(50,50,100,100)
        }
    </script>

浏览器中预览效果

方法四：rect方法绘制

API:

rect(x,y,width,height): rect方法的参数与fillRect，strokeRect的参数一样，只不过rect方法在使用之后并不会立即绘制出一个矩形，而需要再次调用 stroke 或者 fill 方法，选择进行描边还是填充

rect绘制填充矩形

   <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
   <script>
       window.onload = function() {
           var rect = document.getElementById('canvas')
           var ctx = rect.getContext('2d')

           ctx.fillStyle = 'green'
           ctx.rect(50,50,100,100)
           ctx.fill()
       }
   </script>
   
   此方法等同于
   
   <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
   <script>
       window.onload = function() {
           var rect = document.getElementById('canvas')
           var ctx = rect.getContext('2d')

           ctx.fillStyle = "pink"
           ctx.fillRect(50,50,100,100)
       }
   </script>

浏览器中的预览效果

rect绘制填充矩形

    <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    <script>
        window.onload = function() {
            var rect = document.getElementById('canvas')
            var ctx = rect.getContext('2d')

            ctx.strokeStyle = 'skyblue'
            ctx.rect(50,200,100,100)
            ctx.stroke()
        }
    </script>
    
    此方法等同于
    
    <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    <script>
        window.onload = function() {
            var rect = document.getElementById('canvas')
            
            var ctx = rect.getContext('2d')
            
            ctx.strokeStyle = "red"
            ctx.strokeRect(50,50,100,200)
        }
    </script>

浏览器中预览效果

清空矩形

API:

clearRect(x,y,width,height): x和y分别表示清空矩形区域最左上角的坐标，width表示矩形的宽度，height表示矩形的高度。

    <canvas id="canvas" width="500" height="400" style="border: 1px solid red;"></canvas>
    <script>
        window.onload = function() {
            var rect = document.getElementById('canvas')
            var ctx4 = rect.getContext('2d')

           
            ctx.fillStyle = 'green'
            ctx.rect(50,50,100,100)
            ctx.fill()
            ctx.clearRect(60,60,50,50)
        }
    </script>

关于直线图形的相关绘制可参考HTML 5 Canvas查看相应的API，曲线图形

风骚的 【canvas(直线图形绘制)】

风骚的 Canvas

2.1 canvas中的直线图形

2.1.1 直线的绘制

2.1.2 三角形的绘制

2.1.3 矩形的绘制

风骚的【canvas(直线图形绘制)】