canvas（画布）的基本使用

1、绘图：画布（canvas）的使用

2、画布：页面中用于绘制图形的特殊区域，开发人员可以在这个区域内进行自定义图形的绘制

（1）创建画布的方法：

<canvas  id="画布的标识" width="宽度"  height="高度">
     您的浏览器不支持画布
</canvas>

（2）获取画布：getElementById(‘canvas的id’)

（3）获取画笔：使用context对象，语法如下：

let  context = canvas.getContext('2d');  //context代表的是一支笔

（4）绘制直线：直线的起始点、直线的终点、描边(设置线条的颜色)

<script>
    let canvas = document.getElementById('canvas'); //获取画布
    let context = canvas.getContext('2d'); //获取画布
    context.moveTo(100,100); //确定起始点为(100,100) ，即将画笔移动到该点上。moveTo方法用来确定起始点
    context.lineTo(200,200); //确定线条的另一个端点，即终点(200,200)。
    context.stroke(); //进行描边，让线条可见(默认的画笔颜色为黑色)
</script>

（5）设置描边的颜色：context.strokeStyle = ‘red’ //设置描边的颜色。颜色值可以是十六进制、颜色名

（6）设置端点的形状：使用 lineCap=’属性值’ 来设置端点的形状，取值有三种

butt：默认值，无端点，显示的是线条的方形边缘

round：圆形端点

square：方形端点

（7）路径的重置：beginPath()

（8）闭合路径：closePath()

（9）设置线宽：lineWidth = ‘数值’

（10）填充路径：fill()

（11）设置填充颜色：fillStyle = ‘颜色’

（12）画弧线或画圆：arc(x,y,r,开始角,结束角,方向)

x,y：确定圆心的坐标

r：表示圆形或弧线的半径

开始角：表示弧点的起始位置，通常用Math.PI表示(可以理解为180度)

结束角：表示弧点的结束位置

方向：表示绘图的方向（逆时针、顺时针）。为true，表示逆时针，默认值为false，表示顺时针

（13）画矩形：rect(x,y,width,height)，x和y表示矩形左上角的坐标

（14）填充矩形：fillRect(x,y,width,height)，x和y表示矩形左上角的坐标

（15）绘制文本：context.fillText(text,x,y)，text表示要绘制的文本，x和y表示坐标位置

（16）平移当前的坐标系：context.translate(x,y)

（17）设置坐标系的旋转角度：context.rotate(deg)

（18）绘制图像：fillImage(image,x,y)

canvas（画布）的基本使用

猜你喜欢