读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. html/css
  3. 正文

canvas的使用方法

2021年01月03日 22点热度 0人点赞 0条评论
关于canvas是什么,这里就不再次描述了。这篇主要讲一下我在使用canvas的一个步骤:
1、获取canvas的对象:document.getElementById("canvas")
2、获取canvas的上下文环境:canvas.getContext("2d");
先绘制一条直线:
ctx.moveTo(x1,y1);
ctx.lineTo(x2,x2);
ctx.stroke(); // 连线
源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas  id="canvas"></canvas>

    <script>
        const  canvas  =  document.getElementById("canvas");
        const  ctx = canvas.getContext("2d"); // 获取canvas的上下文环境
        ctx.moveTo(100,100);
        ctx.lineTo(230,190);
        ctx.stroke();
    </script>
</body>
</html>

 

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: canvas
最后更新:2021年01月03日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
小程序 Nginx 阅读 node 悦读 vue redux 随笔 CSS canvas 闲谈 taro Echarts git react JavaScript mysql hook flutter
推荐文章
  1. css水平垂直居中的几种方式
  2. 小程序图片压缩
  3. HTML+css3实现字体3D效果
  4. JavaScript中的三角函数应用公式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号