canvas基本使用

一、绘制矩形

fillRect(x,y,width,height) 填充矩形

fillStyle = "rbg(x,x,x)" 填充矩形颜色

strokeRect(x,y.width,height) 绘制矩形边框

strokeRect = "rgb(x,x,x)" 绘制矩形边框颜色

clearRect(x,y,width,height) 清除矩形区域

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    //填充矩形
    ctx.fillStyle = "rgb(100,0,50)";
    ctx.fillRect(0,0,200,100);

    //绘制矩形边框
    ctx.strokeStyle = "rgb(0,150,210)";
    ctx.strokeRect(100,100,200,100);

    //清除矩形区域
    ctx.clearRect(20,20,50,50);
</script>
</html>

二、绘制路径

beginPath() 创建路径
moveTo(x, y) 起始坐标点
lineTo(x,y) 绘制坐标点
closePath() 闭合路径
stroke() 绘制边线
fill() 填充图形

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(100,50);
    ctx.lineTo(150,100);
    ctx.lineTo(100,150);
    ctx.closePath();
    ctx.stroke();
    // ctx.fill();
</script>
</html>

三、绘制圆弧

1、arc(x, y, r, start, end, direction) x,y是圆心坐标；r是半径；start,end是开始和结束弧度；direction是布尔值顺时针(false)或逆时针(true)。

radians=(Math.PI/180)*angle //角度转换成弧度

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(100,100,50,0,Math.PI,true);
    // ctx.closePath(); //闭合
    ctx.stroke();
</script>
</html>

2、arcTo(x1, y1, x2, y2, radius) 参数x1、y1：控制点1坐标；参数x2、y2：控制点2坐标；参数radius：圆弧半径。

绘制的弧形是由两条切线所决定

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.arcTo(200, 100, 200, 200, 100);
    ctx.lineTo(200, 200)
    ctx.stroke();
</script>
</html>

四、绘制贝塞尔曲线

1、绘制二次贝塞尔曲线

quadraticCurveTo(x1, y1, x2, y2) x1,y1为控制点坐标；x2,y2为结束点坐标。

2、绘制三次贝塞尔曲线

bezierCurveTo(x1, y1, x2, y2, x, y) x1,y1为控制点1坐标；x2,y2为控制点2坐标，想x，y为结束点坐标。

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");

    //二次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.quadraticCurveTo(200,150,150,200);
    ctx.stroke()


    //三次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(100, 150);
    ctx.bezierCurveTo(200,200,100,240,300,200);
    ctx.stroke()
</script>
</html>

五、样式和颜色

fillStyle = color 设置填充颜色

strokeStyle = color 设置线条颜色

color 可以说颜色字符串、渐变对象、图案对象、rgb()或rgba()

lineWidth = width 设置线宽

渐变

线性渐变 createLinearGradient(x0,y0,x1,y1)

x0,y0 渐变开始坐标
x1,y1 渐变结束坐标

var sumStyle = ctx.createLinearGradient(250,250,350,250);

sumStyle.addColorStop(0,"#ffa502");

sumStyle.addColorStop(1,"#ff6348");

ctx.fillStyle = sumStyle

径向渐变 createRadialGradient(x0,y0,r0,x1,y1,r1)

x0,y0：渐变的开始圆的坐标

r0：开始圆的半径

x1,y1：渐变的结束圆坐标

r1：结束圆的半径

var earthStyle = ctx.createRadialGradient(200,0,0,200,0,30);
earthStyle.addColorStop(0,"#70a1ff");
earthStyle.addColorStop(1,"#1e90ff");
ctx.fillStyle = earthStyle

线条末端样式

butt：方形

round：圆形（两边增加了一个宽度一半的半圆）

square：方形（两边增加了一个宽度一半的高度）

线条衔接处样式

round 圆角（半径是线段的宽度）

bevel 平角

miter 三角 (默认)

虚线

setLineDash ([x1, x2]) x1表示实线长度，x2表示间隙长度

lineDashOffset 属性设置起始偏移量。

六、绘制文本

fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

文本样式

font 文本大小（ CSS font 属性相同的语法）

textAlign 文本对齐（start, end, left, right or center。默认值是 start）

textBaseline 基线对齐（top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic）

direction 文本方向（ltr, rtl, inherit。默认值是 inherit）

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    ctx.font = "50px sans-serif"
    ctx.fillText("哈哈哈哈哈!",100,100)
    ctx.strokeText("哈哈哈哈哈!",100,150)
</script>
</html>

七、绘制图片

drawImage(image, x, y, width, height) image我图片地址；x，y为位置坐标；width和height为图片大小（伸缩）

drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2) 切片，前 4 个是图像源、切片位置和大小，后 4 个则是切片的显示位置和大小

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg&refer=http%3A%2F%2Fa4.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612489921&t=bf5dfff26a2d95723d8347d154b8f010" alt=""> -->
</body>
<script>

    //绘制img标签图片
    // function draw(){
    //     const canvas = document.querySelector("#canvas");
    //     const ctx = canvas.getContext("2d");
    //     var img = document.querySelector("img");
    //     ctx.drawImage(img,0,0,300,150)
    // }
    // document.querySelector("img").onload=function(){
    //     draw()
    // }
    

    //绘制创建的图片
    function draw(){
        const canvas = document.querySelector("#canvas");
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img,0,0,300,150)

        // 对原图进行切片
        // ctx.drawImage(img,0,0,300,150,0,0,100,100)
    }
    var img = new Image(); 
    img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg&refer=http%3A%2F%2Fa4.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612489921&t=bf5dfff26a2d95723d8347d154b8f010'; // 设置图片源地址
    img.onload=function(){
        draw()
    }


</script>
</html>

八、状态的保存和恢复

save() 保存

restore() 恢复

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");

    ctx.fillRect(0,0,100,50)

    ctx.fillStyle = "rgba(100,255,50,0.6)"
    ctx.fillRect(100,0,100,50)
    ctx.save()


    ctx.fillStyle = "rgba(100,0,50,0.6)"
    ctx.fillRect(200,0,100,50)
    // ctx.save()


    ctx.fillStyle = "rgba(100,100,50,0.6)"
    ctx.restore();
    ctx.fillRect(300,0,100,50)
    
</script>
</html>

九、变形

translate(x, y) 移动原点坐标默认（0,0）

rotate(angle) 旋转圆心是原点坐标默认（0,0）

scale(x, y) 缩放

transform(a, b, c, d, e, f) 变形矩阵

a 水平缩放

b 水平倾斜

c 垂直倾斜

d 垂直缩放

e 水平移动

f 垂直移动

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="1000px" height="1000px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    ctx.fillRect(50,50,100,100)
    ctx.save();

    ctx.translate(150,150)
    ctx.rotate(Math.PI/180*45)
    ctx.scale(1.5,1.5)
    ctx.transform(1, 0.2, 0.2, 1, 0, 0);
    ctx.fillRect(50,50,100,100)

</script>
</html>

十、合成

globalCompositeOperation = type

type = "source-over" 新图覆盖原图默认设置

type = "source-in" 新图和原图重叠部分显示

type = "source-out" 新图和原图不重叠部分显示（原图不显示）

type = "source-atop" 新图和原图重叠部分显示（原图显示）

--------------------------------------------------------------------------------------------------------------

type = "destination-over" 原图覆盖新图

type = "destination-in" 新图和原图重叠部分显示

type = "destination-out" 新图和原图不重叠部分显示（新图不显示）

type = "destination-atop" 新图和原图重叠部分显示（新图显示）

--------------------------------------------------------------------------------------------------------------

type = "lighter" 新老图像都显示，重叠区域颜色叠加（保证重叠部分最量的像素）。

type = "darken" 保留重叠部分最黑的像素。

type = "xor" 重叠部分会变成透明

---------------------------------------------------------------------------------------------------------------

type = "copy" 新图显示，其他透明

十一、裁剪

clip() 方法调用之后绘制的图像

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="1000px" height="1000px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(50,100,100,0.7)"
    ctx.fillRect(50,50,100,100);
    ctx.clip();

    ctx.fillStyle = "rgba(50,100,255,0.7)"
    ctx.fillRect(50,50,200,200);
    
</script>
</html>

十二、动画

setInterval()

setTimeout()

requestAnimationFrame()

案例使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #canvas{
        border: 1px solid #cccccc;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 50px;
    }
</style>
<body>
    <canvas id="canvas" width="600px" height="500px"></canvas>
</body>
<script>
    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    
    var time = 0.5
    var tims = 2
    draw()
    function draw(){
        // console.log("123")
        ctx.clearRect(0, 0, 600, 500); //清空所有的内容

        //背景
        ctx.fillStyle = "rgba(0, 0, 0,1.0)"
        ctx.fillRect(0,0,600,500);



        //太阳
        ctx.beginPath()
        var sumStyle = ctx.createLinearGradient(250,250,350,250);
        sumStyle.addColorStop(0,"#ffa502");
        sumStyle.addColorStop(1,"#ff6348");
        ctx.fillStyle = sumStyle
        ctx.arc(300,250,50,0,2*Math.PI,true)
        ctx.fill()
        

        //地球轨迹
        ctx.translate(300,250)
        ctx.beginPath()
        ctx.strokeStyle = "rgba(255, 195, 18,1.0)"
        ctx.arc(0,0,200,0,2*Math.PI,true)
        ctx.closePath()
        ctx.stroke()


        //地球
        ctx.save()
        ctx.rotate(Math.PI/180*time)
        ctx.beginPath()
        
        var earthStyle = ctx.createRadialGradient(200,0,0,200,0,30);
        earthStyle.addColorStop(0,"#70a1ff");
        earthStyle.addColorStop(1,"#1e90ff");
        ctx.fillStyle = earthStyle
        ctx.arc(200,0,30,0,2*Math.PI,true)
        ctx.fill()
       
        
        //月球轨迹
        ctx.translate(200,0)
        ctx.beginPath()
        ctx.strokeStyle = "rgba(255, 195, 18,1.0)"
        ctx.arc(0,0,50,0,2*Math.PI,true)
        ctx.closePath()
        ctx.stroke()



        //月球
        ctx.rotate(Math.PI/180*tims)
        ctx.beginPath()
        ctx.fillStyle = "rgba(165, 177, 194,1.0)"
        ctx.arc(50,0,10,0,2*Math.PI,true)
        ctx.fill()
        ctx.restore();

        time+=0.5
        tims+=2
        ctx.translate(-300,-250)
        requestAnimationFrame(draw);
    }
    
    
</script>
</html>

posted @ 2021-01-06 17:12 JS-Feng 阅读(212) 评论(0) 收藏举报

刷新页面返回顶部

JS-Feng

canvas基本使用

公告