读心悦

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

canvas的使用方法

2021年1月3日 74点热度 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年1月3日

读心悦

韦永愿的个人博客

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

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
node JavaScript git vue redux 悦读 canvas Nginx 闲谈 hook taro 随笔 flutter react 阅读 Echarts CSS mysql 小程序
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
未来见,遇见更好的自己! 微信小程序自动更新源码 JavaScript身份证校验源码 this.props.history.push传值 web性能优化笔记 小程序云开发·数据库

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号