canvas第一天(画折线和不规则矩形)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        canvas{
            background: blue;
        }
    </style>


    <title>Document</title>
</head>
<body>
<canvas id="canvas" width="900" height="500"></canvas>
<script>
//获得画板
var canvas=document.getElementById("canvas");
//获得绘画环境
var cv=canvas.getContext('2d');
//开启路径（相当于大喊一声我要开始画了）
cv.beginPath();
//移动笔触到开始位置
cv.moveTo(100,100);
//指定要画到哪里去
cv.lineTo(600,300);


//定义拐角类型
cv.lineJoin='round';
//定义划线的粗细
cv.lineWidth='10';
//定义划线颜色
cv.strokeStyle='white';
//把线条画出来
cv.stroke();
cv.lineTo(700,150);
cv.stroke();
cv.lineTo(780,150);
cv.stroke();
</script>
</body>
</html>

运行结果如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        canvas{
            background: red;
        }
    </style>
    <script type="text/javascript">
    window.onload=function(){
      //获得画板
      // var canvas=document.getElementById("canvas");
      //获得绘画环境
      var cv=canvas.getContext('2d');
      //指定填充颜色
      cv.fillStyle="blue";
      //绘制一个填充矩形
      cv.fillRect(200,100,260,199);
      // 绘制空心矩形
      // cv.strokeRect(200,100,260,199);
      // cv.lineWidth='10';
      // // 指定线条颜色
      // cv.strokeStyle='#F9264C';
      // // 清除矩形像素
      cv.clearRect(200,100,100,50);
    }

    </script>
    <title>Document</title>
</head>
<body>
<!-- canvas负责在网页中绘制图形 -->
<!-- 图表 -->
<!-- <canvas>标签只是图形容器你必须用脚本来绘制图形 -->
<!-- API方法 -->
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>

运行结果如下:

别废话,拿你代码给我看。