HTML5 canvas

最新推荐文章于 2023-06-08 15:50:16 发布

木易一

最新推荐文章于 2023-06-08 15:50:16 发布

阅读量401

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS

本文链接：https://blog.youkuaiyun.com/weixin_43684713/article/details/87774999

HTML+CSS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas的使用方法，包括基础语法、线条绘制、填充路径、响应鼠标绘制、矩形、图像、文本、圆形绘制，以及如何设置渐变色，是初学者和开发者快速掌握Canvas绘图技巧的实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、关于canvas

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。

canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

二、canvas基础语法

1.获取canvas
var canvas=document.getElementById("canvas");
2.设置canvas宽和高
canvas.width=document.documentElement.clientWidth;
canvas.height=document.documentElement.clientHeight;
3.转换为2d模式
var content=canvas.getContext("2d");
4.使用js提供的API去绘制

三、绘制线条


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    //获取canvas
    var canvas=document.getElementById("canvas");
    //设置canvas宽和高
    canvas.width=document.documentElement.clientWidth;
    canvas.height=document.documentElement.clientHeight;
    //转换为2d模式
    var content=canvas.getContext("2d");
    //使用js提供的API去绘制
    
    //1.绘制线条
    content.lineWidth=5;//设置线条宽度
    content.strokeStyle="palevioletred";//设置线条颜色
    //画线的坐标
    content.beginPath();//起始一条路径，或重置当前路径
    content.moveTo(200,200);//起始坐标
    content.lineTo(200,400);//终止坐标
    content.stroke();//绘制已定义的路径
    content.closePath();//创建从当前点回到起始点的路径
</script>
</body>
</html>

四、绘制线条并填充路径

<script>
    //获取canvas
    var canvas=document.getElementById("canvas");
    //设置canvas宽和高
    canvas.width=document.documentElement.clientWidth;
    canvas.height=document.documentElement.clientHeight;
    //转换为2d模式
    var content=canvas.getContext("2d");
    //使用js提供的API去绘制
    content.beginPath();//起始一条路径，或重置当前路径
    content.lineWidth=5;//设置线条宽度
    content.fillStyle="#93ffc5";//设置或返回用于填充绘画的颜色、渐变或模式
    content.strokeStyle="blue";//设置线条颜色
    content.moveTo(400,400);//起始坐标
    content.lineTo(0,400);//终止坐标
    content.lineTo(400,600);//终止坐标
    content.stroke();//绘制已定义的路径
    content.fill();//填充当前绘图（路径）
    content.closePath();//创建从当前点回到起始点的路径
</script>

五、用鼠标在网页上绘制任意图案

<script>
    //获取canvas
    var canvas=document.getElementById("canvas");
    //设置canvas宽和高
    canvas.width=document.documentElement.clientWidth;
    canvas.height=document.documentElement.clientHeight;
    //转换为2d模式
    var content=canvas.getContext("2d");
    //使用js提供的API去绘制
    content.lineWidth=5;//设置线条宽度
    content.strokeStyle="#93ffc5";//设置线条颜色

    document.body.onmousedown=function(e){
        //获取鼠标按下时的坐标，该坐标为初始位置的坐标
        var x= e.pageX;
        var y= e.pageY;
        content.moveTo(x,y);
        this.onmousemove=function(evevt){
            //获取鼠标移动时的坐标，该坐标为终止位置的坐标
            var x1=evevt.pageX;
            var y1=evevt.pageY;
            content.lineTo(x1,y1);
            content.stroke();
        }
    };
    //鼠标抬起时不再绘制
    document.body.onmouseup=function(){
        this.onmousemove=null;
    };
</script>

六、绘制矩形

<script>
    //获取canvas元素
    var can=document.getElementById("can");
    //动态的设置宽和高
    //获取屏幕的可视区域宽高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    //操作canvas
    //转化为2d模式
    var content=can.getContext("2d");
    //绘制矩形
    content.fillStyle="#ff4c94";
    content.lineWidth=10;
    content.strokeStyle="#acecff";
    content.strokeRect(200,200,400,200);//前两个参数是矩形左上角位置坐标，第三个参数是矩形的宽，第四个参数是矩形的高
    content.fillRect(200,200,400,200);//前两个参数是矩形左上角位置坐标，第三个参数是矩形的宽，第四个参数是矩形的高
    content.fill();
    //清除
    content.clearRect(300,300,10,10);//清空给定矩形内的指定像素。
</script>

七、绘制图像

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

语法：

在画布上定位图像：context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数：

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

<script>
    //获取canvas元素
    var can=document.getElementById("can");
    //动态的设置宽和高
    //获取屏幕的可视区域宽高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    //操作canvas
    //转化为2d模式
    var content=can.getContext("2d");
    var img=document.createElement("img");
    img.src="../img/22.jpg";
    content.drawImage(img,0,0,200,200,100,100,200,200);
</script>

八、绘制文本

strokeText() 方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

语法：context.strokeText(text,x,y,maxWidth);

参数：

参数	描述
text	规定在画布上输出的文本。
x	开始绘制文本的 x 坐标位置（相对于画布）。
y	开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth	可选。允许的最大文本宽度，以像素计。

<script>
    //获取canvas元素
    var can=document.getElementById("can");
    //动态的设置宽和高
    //获取屏幕的可视区域宽高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    //操作canvas
    //转化为2d模式
    var content=can.getContext("2d");
    var rad=content.createRadialGradient(700,200,10,700,200,300);
    content.beginPath();
    content.strokeStyle="red";//设置文本颜色
    content.font="50px yahei";//第一个参数是字体大小，第二个参数是字体样式
    content.strokeText("Hello World !",400,200,500);
    content.closePath();
</script>

九、绘制圆形

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数：

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

<script>
    //获取canvas元素
    var canvas=document.getElementById("canvas");
    //获取屏幕的可视区域宽高
    var screenW=document.documentElement.clientWidth;
    var screenH=document.documentElement.clientHeight;
    canvas.width=screenW;
    canvas.height=screenH;
    //操作canvas
    //转化为2d模式
    var content2d=canvas.getContext("2d");
    //画圆
    content2d.beginPath();
    content2d.strokeStyle="pink";
    content2d.lineWidth=5;
    content2d.arc(700,350,100,0,Math.PI*2,true);
    content2d.stroke();
    content2d.closePath();

    content2d.beginPath();
    content2d.strokeStyle="palegreen";
    content2d.fillStyle="palegreen";
    content2d.arc(700,350,50,0,Math.PI,true);
    content2d.stroke();
    content2d.fill();
    content2d.closePath();
</script>

十、设置渐变色

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

语法：

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数：

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

addColorStop() 方法在渐变中的某一点添加一个颜色变化。

语法：addColorStop(offset, color)

参数：

参数	描述
offset	这是一个范围在 0.0 到 1.0 之间的浮点值，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点。
color	以一个 CSS 颜色字符串的方式，表示在指定 offset 显示的颜色。沿着渐变某一点的颜色是根据这个值以及任何其他的颜色色标来插值的。

<script>
    //获取canvas元素
    var canvas=document.getElementById("canvas");
    //获取屏幕的可视区域宽高
    var screenW=document.documentElement.clientWidth;
    var screenH=document.documentElement.clientHeight;
    canvas.width=screenW;
    canvas.height=screenH;
    //操作canvas
    //转化为2d模式
    var content2d=canvas.getContext("2d");
    content2d.beginPath();
    var rad=content2d.createRadialGradient(700,400,10,700,400,300);
    //添加渐变色
    rad.addColorStop(0,"#fb6658");
    rad.addColorStop(0.1,"#fbab40");
    rad.addColorStop(0.2,"#f8fb67");
    rad.addColorStop(0.3,"#c3fb73");
    rad.addColorStop(0.4,"#4ffbac");
    rad.addColorStop(0.5,"#a4fbf9");
    rad.addColorStop(0.6,"#a0d0fb");
    rad.addColorStop(0.7,"#ada0fb");
    rad.addColorStop(0.8," #fb6dc3");
    rad.addColorStop(0.9," #fb9a93");
    rad.addColorStop(1," #fb92b9");
    content2d.fillStyle=rad;
    content2d.arc(700,400,300,0,Math.PI*2,true);
    content2d.fill();
    content2d.closePath();
</script>