HTML5学习笔记----Day02

最新推荐文章于 2024-08-09 16:23:49 发布

芋头同学

最新推荐文章于 2024-08-09 16:23:49 发布

阅读量162

点赞数

分类专栏： HTML5学习笔记

本文链接：https://blog.csdn.net/jsupoker/article/details/108390079

版权

HTML5学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。学习目标：Canvas绘制路径、矩形、圆形、字符、渐变背景、添加图像、其他绘制方法

canvas使用步骤：

1、创建canvas标签：

<canvas id="mypaper" width="500px" height="500px">
</canvas>

2、使用js在canvas上绘制图像：

<script>
    var paper = document.getElementById("mypaper")//获取画布
    var paint = paper.getContext("2d");//获取画笔
    paint.fillStyle = "#ff0000"//设置画笔颜色
    paint.fillRect(100, 200, 100, 300)//绘画
</script>

在这里插入图片描述

canvas绘制路径：

1、绘制一条直线：

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    paint.moveTo(10, 10)
    paint.lineTo(100, 200)
    paint.stroke()
</script>

在这里插入图片描述
为什么要使用getContext(‘2d’)
Canvas WebApi参考

2、绘制一个图形：

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    paint.moveTo(10, 10)
    paint.lineTo(100, 200)
    paint.lineTo(50,200)
    paint.lineTo(10,10)
    paint.stroke()
</script>

在这里插入图片描述

3、绘制闭合图形并填充颜色：

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    paint.fillStyle = "#ff00ff"
    paint.moveTo(10, 10)
    paint.lineTo(100, 200)
    paint.lineTo(300,100)
    paint.lineTo(10,10)
    paint.fill()
</script>

在这里插入图片描述

canvas绘制圆：

API：

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数名	作用
x	圆弧中心（圆心）的 x 轴坐标
y	圆弧中心（圆心）的 y 轴坐标
radius	圆弧的半径
startAngle	圆弧的起始点， x轴方向开始计算，单位以弧度表示
endAngle	圆弧的终点，单位以弧度表示
anticlockwise	可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    paint.fillStyle = "#ffbb00"//设置画笔颜色
    paint.arc(200,200,100,0,Math.PI * 2,true)//设置绘制路径
    paint.fill()//开始绘制
</script>

在这里插入图片描述

canvas绘制线性渐变背景：

API：

CanvasRenderingContext2D.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线 CanvasGradient对象。
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);

1、如何设置渐变方向：

createLinearGradient(start-x,start-y,end-x,end-y)
线性渐变是由createLinearGradient()方法里的坐标参数来确定的，一个起始坐标（start-x,start-y），一个结束坐标(end-x,end-y)。
在这里插入图片描述

2、渐变色绘制：

1、垂直渐变：

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    var gcolor = paint.createLinearGradient(0,0,0,300)//关键代码
    gcolor.addColorStop(0,"#ff0000")
    gcolor.addColorStop(0.5,"#00ff00")
    gcolor.addColorStop(1,"#000000")
    paint.fillStyle = gcolor;
    paint.fillRect(0,0,300,300)
</script>

在这里插入图片描述

2、横向渐变：

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    var gcolor = paint.createLinearGradient(0,0,300,0)
    gcolor.addColorStop(0,"#ff0000")
    gcolor.addColorStop(0.5,"#00ff00")
    gcolor.addColorStop(1,"#000000")
    paint.fillStyle = gcolor;
    paint.fillRect(0,0,300,300)
</script>

在这里插入图片描述

3、斜线渐变：

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    var gcolor = paint.createLinearGradient(0,0,300,300)
    gcolor.addColorStop(0,"#ff0000")
    gcolor.addColorStop(0.5,"#00ff00")
    gcolor.addColorStop(1,"#000000")
    paint.fillStyle = gcolor;
    paint.fillRect(0,0,300,300)
</script>

在这里插入图片描述
稍微调整一下斜线角度

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    var gcolor = paint.createLinearGradient(0,0,300,100)
    gcolor.addColorStop(0,"#ff0000")
    gcolor.addColorStop(0.5,"#00ff00")
    gcolor.addColorStop(1,"#000000")
    paint.fillStyle = gcolor;
    paint.fillRect(0,0,300,300)
</script>

在这里插入图片描述

canvas绘制放射型渐变背景

API：

CanvasRenderingContext2D.createRadialGradient() 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数名	作用
x0	开始圆形的 x 轴坐标
y0	开始圆形的 y 轴坐标
r0	开始圆形的半径
x1	结束圆形的 x 轴坐标
y1	结束圆形的 y 轴坐标
r1	结束圆形的半径

绘制演示：

<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    var gcolor = paint.createRadialGradient(200,200,40,200,200,150)
    gcolor.addColorStop(0,"red")
    gcolor.addColorStop(1,"white")
    paint.fillStyle = gcolor;
    paint.arc(200,200,200,0,Math.PI*2,false);
    paint.fill()
</script>

在这里插入图片描述

canvas绘制图像

API：

Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种方式在Canvas上绘制图像。
参考官方语法

绘制演示：

<canvas id="mypaper" width="1500px" height="1500px">
</canvas>
<script>
    var paper = document.getElementById("mypaper")
    var paint = paper.getContext("2d");
    var img = new Image();
    img.src = "./images/test.jpg"
    paint.drawImage(img,0,0,400,250)
</script>