当前位置：网站首页>canvas 学习笔记

canvas 学习笔记

2022-04-21 10:23:00 【晓_枫】

html

<canvas style="border: solid 1px red" id="cvs"><canvas>

js

绘制一条线

let cvs = document.querySelect('#cvs');  // 获取画布元素

let ctx = ctx.getContent('2d'); //获取工具集

ctx.moveTo(40, 40); // (x, y)  选择起始点

ctx.lineTo(80, 80); // 绘制线到目标点
// 这时所有的操作都只是保存在内存里的，没有显示到页面

ctx.storke(); // 绘制，使上面的内容显示到页面中

绘制三角形并修改颜色、线条宽度


    var cvs = document.getElementById('cvs');    // 获取画布元素

    var ctx = cvs.getContext("2d");    //  获取工具集


    ctx.moveTo(50, 50);    // 定位开始位置

    ctx.lineTo(150, 50);   // 第一个点

    ctx.lineTo(80, 100);   // 第二个点

    ctx.closePath();  // 闭合路径， 这里也可以使用 ctx.lineTo(50, 50) 效果相同

    ctx.strokeStyle = 'red';    // 设置绘制图形的颜色

    ctx.lineWidth = 20;    // 设置线条宽度

    ctx.stroke(); // 绘制

版权声明
本文为[晓_枫]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_18676843/article/details/124298341

边栏推荐

猜你喜欢

随机推荐