canvas学习

最新推荐文章于 2024-05-31 16:22:19 发布

htt2321

最新推荐文章于 2024-05-31 16:22:19 发布

阅读量49

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_43204464/article/details/128385132

版权

有一个标签，他是需要button和input可以切换的

1.canvas 标签会被认为是一张图片，可以下载，

2.canvas不能添加子节点标签，也不能添加内容

3.canvas里面任何操作。都必须用js写出来

4.默认宽度和高度：300 * 150，canvas标签的w/h务必通过标签属性 width/height设置

<canvas width='600' height='400'><canvas>
   // 使用方法 
//1. 获取canvas节点 是个对象
let canvas = document.querySelector('canvas')
//2.利用这个对象的方法得到的也是个对象,如果说canvas标签是画布，那么这个ctx就是个画笔
let ctx = canvas.getContext('2d')
//3。绘制线段，moveto是线段的起点
ctx.moveTo(100,100)
//4.中间其他点，可以有几个
ctx.lineTo(100,200)
//设置颜色
ctx.fillStyle = 'red'
//填充
ctx.fill()
/设置线段的颜色
ctx.strokeStyle = 'purple'
//还能设置线段的宽度
ctx.lineWidth = "20"
//6.把起点和终点连接在一起
ctx.closePath()
//5.stroke方法绘制线段,出效果 
ctx.stroke()

绘制矩形

 <style>
        *{
            margin:0;
            padding:0
        }
       canvas{
        border: 1px solid black;
       }
    </style>
</head>
<body>
   <canvas width="600" height="400"></canvas>
   <script>
    //    <!-- 绘画矩形 -->
   let canvas = document.querySelector('canvas')
   let ctx = canvas.getContext('2d')
//    有画笔了，开始设置点
// 四个参数，前俩个参数是距离xy轴的距离，后俩个参数是长宽的高度
 ctx.strokeRect(100,200,100,200)
//  第二种方式
// 填充颜色
ctx.fillStyle = 'red'
ctx.fill()
ctx.fillRect(300,300,100,200)

绘制圆

<style>
        *{
            margin:0;
            padding:0
        }
       canvas{
        border: 1px solid black;
       }
    </style>
</head>
<body>
    <canvas width="500" height="300"><canvas>
 <script>
    // 获取节点
    let canvas = document.querySelector('canvas')
    // 获取上下文
    let ctx = canvas.getContext('2d')
    // 绘制圆形
    ctx.beginPath()
    // 绘制圆的方法 前俩个参数是圆心，第三个参数是半径，第四个参数是起始弧度，第五个参数
    // 结束的弧度,360° = 2 * PI,最后一个参数是否逆时针绘制
    ctx.arc(100,100,50,0, 2 * Math.PI,false)
    // 设置填充的颜色
    ctx.fillStyle = 'red'
    ctx.fill()
    ctx.stroke()
   </script>

htt2321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习

4.默认宽度和高度：300 * 150，canvas标签的w/h务必通过标签属性 width/height设置。有一个标签，他是需要button和input可以切换的。1.canvas 标签会被认为是一张图片，可以下载，2.canvas不能添加子节点标签，也不能添加内容。3.canvas里面任何操作。
复制链接

扫一扫