canvas

最新推荐文章于 2024-09-16 06:30:00 发布

雪花酥01

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量257

点赞数 1

分类专栏：大前端 # HTML5 文章标签：前端 html javascript canvas html5

本文链接：https://blog.csdn.net/shuozai1204/article/details/141674370

版权

大前端同时被 2 个专栏收录

164 篇文章 0 订阅

订阅专栏

HTML5

6 篇文章 0 订阅

订阅专栏

一、canvas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
  </head>
  <body>
    <!-- 
        canvas是HTML5中的一个元素，它提供了一个可在网页上绘制图形、动画和图像的区域
        通过js，可以在canvas上绘制各种图像和文本

        通常情况下，要为canvas设置id属性，并且设置width和heigh来指定画布大小。
     -->
    <canvas
      id="myCanvas"
      width="200"
      height="100"
      style="border: 1px solid #000"
    ></canvas>
  </body>
</html>
<script>
  // 要想绘制图像 必须借助js完成
  var c = document.getElementById("myCanvas");
  /*
        getContext()方法用于获取绘图上下文，通过获取上下文可以进行绘图操作
        getContext('2d') 表示获取2d绘图上下文，会返回一个对象，该对象提供了绘制2d图像的方法和属性
    */
  var content = c.getContext("2d");
  console.log(content);
  /*
        canvas：指向当前绘图上下文过关联的Canvas元素
        fillStyle：绘图的颜色
        strokeStyle：图像轮廓的颜色
        fillRect(x,y,width,height)
            x：矩形左上角的x坐标
            y：矩形左上角的y坐标
            width：矩形的宽度
            height：矩形的高度
    */
  content.fillStyle = "#ccc";
  content.fillRect(0, 0, 100, 60);
</script>

二、路径

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>路径</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="300"></canvas>
  </body>
</html>
<script>
  var c = document.getElementById("myCanvas");
  var content = c.getContext("2d");
  /*
        在Canvas上绘制路径的方法
        1.定义线条起点坐标 moveTo(x,y)
        2.定义线条的终点坐标 lineTo(x,y)
        3.把两个坐标连起来 stroke()
    */
  content.moveTo(0, 0); // 起点
  content.lineTo(200, 100); // 终点
  // 线条的颜色
  content.strokeStyle = "blue";
  content.stroke(); // 把坐标连起来 生成路径
</script>