canvas基础—01绘制路径

Bertha 。 2022-03-20 07:30 295阅读 0赞

### 1.标签、绘制环境、绘制方块、设置绘图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

绘制方块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

### 2.边界绘制、绘制路径 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

边界连接点样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

绘制三角形

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5][]

### 3.绘制路径 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6][]

绘制两个不同的三角形

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');//webgl:3D绘图
            // 绘制路径 开始绘制(将每个绘制进行一个明确的区分用beginPath和stroke。fill等)
            oGC.beginPath()     //开始绘制
            oGC.moveTo(100,100) //移动到初始的目标点（100,100）
            oGC.lineTo(200,200) //移动到目标点（100,100）
            oGC.lineTo(300,200) //移动到目标点（300,200）
            oGC.closePath()     //连接初始点和最后一个绘制的点
            oGC.stroke()        //绘制结束
            // 绘制路径
            oGC.beginPath()     //开始绘制
            oGC.moveTo(100,200) //移动到初始的目标点（100,100）
            oGC.lineTo(200,300) //移动到目标点（100,100）
            oGC.lineTo(300,300) //移动到目标点（300,200）
            oGC.closePath()     //连接初始点和最后一个绘制的点
            oGC.fill()        //填充以上路径
        }
    
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 7][]

绘制矩形 rect()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 8][]

删除画布区域 clearRect()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 9][]

作用于局部 save(),restore()

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');//webgl:3D绘图
            // 绘制路径1 开始绘制(将每个绘制进行一个明确的区分用beginPath和stroke。fill等)
            oGC.save()  //将oGC.fillStyle = 'red'封闭起来,不至于影响下面的三角形
            oGC.fillStyle = 'red' 
            oGC.beginPath()     //开始绘制
            oGC.moveTo(100,100) //移动到初始的目标点（100,100）
            oGC.lineTo(200,200) //移动到目标点（100,100）
            oGC.lineTo(300,200) //移动到目标点（300,200）
            oGC.closePath()     //连接初始点和最后一个绘制的点
            oGC.fill()        //绘制结束
            oGC.restore()   //将oGC.fillStyle = 'red'封闭起来,不至于影响下面的三角形
            // 绘制路径2
            oGC.beginPath()     //开始绘制
            oGC.moveTo(100,200) //移动到初始的目标点（100,100）
            oGC.lineTo(200,300) //移动到目标点（100,100）
            oGC.lineTo(300,300) //移动到目标点（300,200）
            oGC.closePath()     //连接初始点和最后一个绘制的点
            oGC.fill()        //填充以上路径
        }
    
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 10][]

端点样式lineCap

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 11][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/5792652b44534ae18bf7eeeec2aa901c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/d9c7d3ab24c84e06b05791fe5fb98be8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220320/55731a0c4c5f40779a16fd4273388a19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220320/d11b9577fcf745419de1e44729cb87f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220320/acbce3dabc1644efba774ef94e7ef9ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5]: /images/20220320/923ae9e071e7470daa1e1739f1f2f216.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6]: /images/20220320/b5742bc855904cde8aeccfbb273db994.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 7]: /images/20220320/2c5e16010580435fadd9de5137985d5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 8]: /images/20220320/52d65c1078f84e0d9da8dfc30d58ae9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 9]: /images/20220320/7d02f7d46fa3409ca07d7b9d87e77116.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 10]: /images/20220320/2169515120e14139b9e7aceafdf7af29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 11]: /images/20220320/dcb7f253a07f4423930ef2625c95958c.png