h5c3-day06(画布)

最新推荐文章于 2024-08-09 21:30:00 发布
码陨之间
最新推荐文章于 2024-08-09 21:30:00 发布
阅读量23
点赞数
文章标签： javascript 开发语言 ecmascript
本文链接：https://blog.csdn.net/ZXK19990928/article/details/132481709
版权
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <!-- 画布具有默认宽高 -->
    <canvas class="can" width="800" height="800">
      您当前浏览器不支持canvas 请升级浏览器版本吧
    </canvas>
    <script>
      // // 绘制直线
      // // 1.获取元素
      // var canvas = document.querySelector("#can");
      // // 2.获取画笔
      // var myCan = canvas.getContext('2d');
      // // 3.定义一个起点（绘制一个起点）
      // // moveTo(x,y) 用来绘制起点
      // myCan.moveTo(200, 200);
      //  // 4.绘制直线
      // // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
      // myCan.lineTo(600, 600);
      //  // 5.填充图形
      //  myCan.stroke();

      // // 给画笔添加颜色和粗细
      // // console.log(can);
      // // 1.获取元素
      // var canvas = document.querySelector("#can");
      // // 2.获取画笔
      // var myCan = canvas.getContext('2d');
      // console.log(myCan);
      // // 3.定义一个起点（绘制一个起点）
      // // moveTo(x,y) 用来绘制起点
      // myCan.moveTo(200, 200);
      // // 4.绘制直线
      // // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
      // myCan.lineTo(600, 600);
      // // 画笔的颜色和粗细要在填充之前修改
      // myCan.strokeStyle = "orange";
      // myCan.lineWidth = 10;
      // myCan.moveTo(600,600);
      // myCan.lineTo(600, 200);
      // // 5.填充图形
      // myCan.stroke();

      // // 绘制矩形
      // // 1.获取元素
      // var canvas = document.querySelector("#can");
      // // 2.获取画笔
      // var myCan = canvas.getContext('2d');
      // // 路径的开始
      // // 开始路径
      // myCan.beginPath();
      // // 3.定义一个起点（绘制一个起点）
      // // moveTo(x,y) 用来绘制起点
      // myCan.moveTo(200, 200);
      // // 4.绘制直线
      // // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
      // myCan.lineTo(200, 400);
      // myCan.lineTo(600, 400);
      // myCan.lineTo(600, 200);
      // // 画笔的颜色和粗细要在填充之前修改
      // myCan.strokeStyle = "orange";
      // myCan.lineWidth = 10;
      // // 闭合路径
      // myCan.closePath();
      // // 5.填充图形
      // myCan.stroke();

      // 绘制三角形
      // // 1.获取元素
      // var canvas = document.querySelector("#can");
      // // 2.获取画笔
      // var myCan = canvas.getContext('2d');
      // console.log(myCan);
      // // 路径的开始
      // // 开始路径
      // myCan.beginPath();
      // // 3.定义一个起点（绘制一个起点）
      // // moveTo(x,y) 用来绘制起点
      // myCan.moveTo(400, 200);
      // // 4.绘制直线
      // // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
      // myCan.lineTo(200,500);
      // myCan.lineTo(600,500);
      // // 画笔的颜色和粗细要在填充之前修改
      // myCan.strokeStyle = "orange";
      // myCan.lineWidth = 10;
      // // 闭合路径
      // myCan.closePath();
      // // 5.填充图形
      // myCan.stroke();

      // 快速创建矩形
      // // 1.获取元素
      // var canvas = document.querySelector("#can");
      // // 2.获取画笔
      // var myCan = canvas.getContext('2d');
      // // myCan.rect(x, y, width, height);
      // myCan.rect(200, 200, 400, 100);
      // myCan.strokeStyle = "pink";
      // myCan.lineWidth = 10;
      // // 填充
      // myCan.stroke();

      // 快速创建描边矩形
      // // 1.获取元素
      // var canvas = document.querySelector("#can");
      // // 2.获取画笔
      // var myCan = canvas.getContext('2d');
      // // myCan.strokeRect(x, y, width, height);
      // myCan.strokeRect(200, 200, 400, 200);

      // 快速创建填充矩形
      // // 1.获取元素
      // var canvas = document.querySelector("#can");
      // // 2.获取画笔
      // var myCan = canvas.getContext('2d');
      // console.log(myCan);
      // // myCan.fillRect(x, y, width, height);
      // // fillStyle 用来修改 填充颜色
      // myCan.fillStyle = "pink";
      // myCan.fillRect(200, 200, 400, 200);

      // 清除矩形
      // 1.获取元素
      // var canvas = document.querySelector("#can");
      // // 2.获取画笔
      // var myCan = canvas.getContext('2d');
      // myCan.rect(200, 300, 400, 400);
      // // 画笔颜色
      // myCan.strokeStyle = "pink";
      // // 画笔粗细
      // myCan.lineWidth = 10;
      // // 填充颜色
      // myCan.fillStyle = "yellow";
      // // 填充方法
      // myCan.fill();
      // // cxt.clearRect(x, y, width, hegiht);
      // myCan.clearRect(260, 380, 100, 100);
      // myCan.stroke();

      // 圆弧
      // var can = document.querySelector('#can');
      // // 获取画笔
      // var mycan = can.getContext('2d');
      // // 弧度和角度的转换公式： rad = deg*Math.PI/180; deg=rad*180/Math.PI
      // // 语法：cxt.arc(x, y, r, startAngle, endAngle, counterclockwise);
      // // 开始路径
      // mycan.beginPath();
      // mycan.moveTo(400,400);
      // var strat = 0 * Math.PI / 180;
      // var end = 90 * Math.PI / 180;
      // // mycan.arc(400, 400, 200, strat, end, false);
      // mycan.arc(400, 400, 200, strat, end, true);
      // // 结束路径
      // mycan.closePath();
      // mycan.stroke();

      // 绘制文本 裁剪图片
      // var mycan = can.getContext("2d");
      // // 创建元素
      // var img = document.createElement("img");
      // img.src = "../img/1.png";
      // // onload 等待内容 资源文件加载完毕之后执行
      // img.onload = function () {
      //     // mycan.drawImage(img, 0, 0, 600, 600);
      //     // 9参数可以对 图片进行裁剪
      //     // sx,sy            裁剪图片的位置
      //     // swidth,sheight   裁剪大小
      //     // x,y,             裁剪之后显示在画布内的方位
      //     // width,height     裁剪之后显示在画布内的大小
      //     // cxt.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
      //     // 先裁剪 然后规定现在画布内的大小
      //     mycan.drawImage(img, 330, 240, 100, 100, 0, 0, 600, 600)
      //     mycan.fillStyle = "orange";
      //     mycan.font = "20px 华文彩云"
      //     mycan.fillText("", 60, 140);
      // }
    </script>
  </body>
</html>