canvas常用api

最新推荐文章于 2024-04-01 16:46:43 发布

XUPT-前端在逃工程师

最新推荐文章于 2024-04-01 16:46:43 发布

阅读量610

点赞数

分类专栏： JavaScript 文章标签： canvas

本文链接：https://blog.csdn.net/Dimuzero/article/details/113341596

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

canvas常用api

属性	使用参数
fillStyle（填充颜色）	字符串颜色值（十六进制，rbg，rbga）
strokeStyle（线条颜色）	字符串颜色值（十六进制，rbg，rbga）
lineCap（线条端点样式）	字符串（buzz，round和square）
lineJoin（两线条相交时的拐点样式）	字符串（）
lineWidth（线条的宽度）	数值类型（如果是负数，NaN或者Infinity都会忽略）
shadowColor（阴影的颜色）	字符串（十六进制，rbg，rbga）
shadowBulr （阴影的模糊程度）	数值类型（round）
shadowoffsetX（x轴偏移的大小）	数值类型（）
shadowoffsetY（y轴偏移的大小）	数值类型（）
font	字符串（字体大小，字体样式）

方法	参数
moveTo（x,y）（起始点坐标）	x轴坐标，y轴坐标
lineTo（x,y）（结束点坐标）	x轴坐标，y轴坐标
beginPath（）（开始路径）	无
closePath（）（闭合路径）	无
stroke（）（）	无
fill（）（）	无
save（保存当前canvas的状态在栈的最上面）	无
restore（依次从堆栈的最上方弹出存储的canvas）	无
strokeText（文字描边）	无
fillText（依次从堆栈的最上方弹出存储的canvas）	无

方法

1.绘制圆

arc（x,y,radius,startAngle,endAngle）
在这里插入图片描述

conText2d.beginPath()
    conText2d.arc(1000, 500, 100, 0, Math.PI * 2) 
    conText2d.lineWidth = 10
    conText2d.strokeStyle = 'red'
    conText2d.fillStyle = '#000'
    conText2d.stroke();
    conText2d.fill()
    conText2d.closePath()

在这里插入图片描述

2.绘制矩形

方法	作用
rect(x, y, width, height)	绘制矩形
fillRect(x, y, width, height)	填充矩形
strokeRect(x, y, width, height)	描边矩形

在这里插入图片描述

conText2d.beginPath()
    conText2d.lineWidth = 10
    conText2d.strokeStyle = '#000'
    conText2d.fillStyle = 'red'
    conText2d.rect(100, 100, 100, 100)
    conText2d.stroke()
    conText2d.fill()
    conText2d.closePath()

在这里插入图片描述

3.绘制文本

在这里插入图片描述

3.1 fillText 填充文字

conText2d.beginPath()
    conText2d.fillStyle = 'red'
    conText2d.font = '24px STheiti, SimHei';
    conText2d.fillText('hello world!', 500, 100, 200);
    conText2d.fill()
    conText2d.closePath()

在这里插入图片描述

3.2 strokeText 描边文字

conText2d.beginPath()
    conText2d.strokeStyle = 'red'
    conText2d.lineWidth = 1
    conText2d.font = '50px 宋体';
    conText2d.strokeText('hello world!', 800, 100);
    conText2d.stroke()
    conText2d.closePath()

在这里插入图片描述

4.其他方法

createImageData（）创建image图像数据
putImageData（）绘制 imageData对象到指定位置
clearReact（）清除区域
bezierCurveTo （）绘制贝塞尔曲线

drawImage（）

context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);