【Canvas】画布

Tiffany_Ho

已于 2024-09-24 23:52:33 修改

阅读量559

点赞数 5

文章标签： canva可画前端

于 2024-09-14 01:24:54 首次发布

本文链接：https://blog.csdn.net/weixin_45718102/article/details/142237080

版权

Canvas 教程 - Web API | MDN

基本语法

创建容器

<canvas id="tutorial" width="150" height="150">
    该浏览器不支持此功能，请升级浏览器版本
</canvas>

id width height style(区分外宽高内宽高)

内部写文字，会在不支持的时候显示

1.找到画布

var c1 = document.getElementById

2.获取画笔，上下文对象

ctx = c1.getContext(‘2d’)

3.绘制图形

方式

ctx.fill() //填充

ctx.stroke() //路径，里面透明

ctx.clear() //清除

矩形

拆分写法

ctx.rect(x,y,w,h)

ctx.fill()

合并写法

ctx.fillRect(x,y,w,h) //填充

ctx.strokeRect(x,y,w,h) //路径，里面透明

ctx.clearRect(x,y,w,h) //清除

圆弧

ctx.arc(x,y,r,startAngle,endAngle,clockwise)

Clockwise 默认false顺时针

ctx.arcTo(x1,y1,x2,y2,r)

线段

ctx.lineTo(x,y)

线条样式

lineWidth

setLineDash([])

lineDashOfReset

贝塞尔曲线

quadraticCurveTo()

三次贝塞尔

bezierCurveTo()

笔迹开始结束

相当于✍️抬笔

ctx.beginPath();

ctx.closePath();

绘制不连续路径

ctx.moveTo(x,y)

封装路线

const path= new Path2D();

heartPath画

ctx.stroke(path);

ctx.fill(path);

创建折线

var polyline=new Path2D(“M10 10 h 80 v 80 z”)

M移动

H水平

V垂直

颜色

strokeStyle

fillStyle

颜色名，十六进制，rgba

线性渐变

let linearGradient = ctx.createLinearGradient(0, 0, 600, 400);

linearGradient.addColorStop(0, "red");

linearGradient.addColorStop(1, "blue");

ctx.fillStyle = linearGradient;

径向渐变

createRadioGradient(x1,y1,r1,x2,y2,r2);

globalAlpha 全局透明度

图案

var img = new Image();

img.src = '';

img.onload = function() {

    var pattern = ctx.createPattern(img, "repeat"); // 可以是图案也可以是canvas对象

    ctx.fillStyle = pattern;

    ctx.fillRect(0, 0, 300, 200);

}

no-repeat repeat-x repeat-y

阴影

shadowOffsetX

shadowOffsetY

shadowBlur // 模糊度

shadowColor

图像

var img=new Image()

img.src = '';

img.οnlοad=function(){

ctx.drawImage(img,x,y,w,h,) // x y 置放位置w h可选缩放

ctx.drawImage(img,x1,y1,x2,y2,x,y,w,h,) // 裁切图片

}

var img = new Image();

img.src = '';

img.onload = function() {

    ctx.drawImage(img, x, y, w, h); // x y 置放位置w h可选缩放

    ctx.drawImage(img, x1, y1, x2, y2, x, y, w, h); // 裁切图片

}

绘制视频或图片

drawImage(image/video,x,y,w,h)