初学HTML5——画布(canvas)

最新推荐文章于 2024-07-24 15:43:52 发布

lxl。。

最新推荐文章于 2024-07-24 15:43:52 发布

阅读量3.3k

点赞数 3

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

本文链接：https://blog.csdn.net/lxl513513/article/details/105287884

版权

HTML5 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

一.canvas介绍

canvas为画布，使用canvas便可以轻松的在网页上绘制图形，文字，图片等。

二.画布的使用

1.创建画布：

HTML5中提供了<canvas>标签，使用<canvas>标签可以在网页中创建一个矩形区域的画布：

<canvas id="cavsElem" width=“400” height="300">
你的浏览器不支持canvas/*当浏览器不支持<canvas>时显示*/
</canvas>

画布本身不具有绘制功能，可以通过JavaScript脚本语言操作绘制图形的API进行绘制操作。

var canvas=document.getElementById('cavsElem');

2.准备画笔：

var context=canvas.getContext('2d');

3.坐标和起点：

设置上下文开始的绘制点，也就是“从哪里开始画”。

context。moveTo(x,y);

4.绘制线条：

lineTo()方法用于定义从“x,y”的位置绘制一条直线到起点或上一线头点。

context.lineTo(x,y);

5.路径：

绘制直线确定了起始点和线头点后，便形成了一条绘制路径，如果复杂路径绘制，必须使用路径开始和结束。

context.beginPath();//开始路径
context.closePath();//结束路径

6.描边和填充

在canvas图形绘制中，路径只是草稿，真正绘制线必须执行stroke（）方法根据路径进行描边，还可以使用fill()方法进行图形的填充。

context.stroke();//描边
context.fill();//填充

7.canvas绘制图形——基本步骤

创建画布：<canvas></canvas>
准备画笔（获取上下文对象）：canvas.getContext(“2d”);
开始路径规划：context.beginPath();
移动起始点：context、moveTo(x,y);
绘制线（矩形，圆形，图片…）:context.lineTo(x,y)
闭合路径：context.closePath();
绘制描边：context.stroke();

三.绘制简单图形：

1.三角形：

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Canvas绘制三角形</title>
</head>
<body>
<canvas id="cavsElem">
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
    //===============基本绘制API====================
    //获得画布
    var canvas = document.getElementById('cavsElem');
    var context = canvas.getContext('2d');  //获得上下文
    //设置标签的属性宽高和边框
    canvas.width = 200;
    canvas.height = 200;
    canvas.style.border="1px solid #000";
    //绘制三角形
    context.beginPath();        //开始路径
    context.moveTo(50,50);    //三角形，左顶点
    context.lineTo(150, 50);   //右顶点
    context.lineTo(150, 150);   //底部的点  
    context.closePath();        //结束路径
    context.stroke();           //描边路径
    //context.fill();//填充
</script>
</body>
</html>

效果如下：

在这里插入图片描述

2.绘制矩形：

canvas中分别使用strokeRect()和fillRect()方法来绘制矩形边框和填充矩形边框和填充矩形

context.strokeRect(x,y,width,heigth);//描边
context.fillRect(x,y,width,height);//填充

在canvas中还有一个相当于橡皮擦的方法，使用它可以清除矩形内绘制的内容。

context.clearRect(x,y,width,height);

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
<canvas id="cavsElem">
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
    //===============绘制矩形====================
    //获得画布
    var canvas = document.getElementById('cavsElem');
    var context = canvas.getContext('2d');  //获得上下文
    //设置标签的属性宽高和边框
    canvas.width = 300;
    canvas.height = 300;
    canvas.style.border="1px solid #000";
    //绘制矩形
    context.strokeRect(0,0,100,40);
    context.fillRect(40,40,100,40);
    context.strokeRect(80,80,100,40);
    context.fillRect(120,120,100,40);
    context.clearRect(100,100,100,40);
</script>
</body>
</html>

效果如下：

在这里插入图片描述

3.canvas绘制圆形

canvas中使用arc()方法来绘制弧形和圆形

context.arc(x,y,radius,startAngle,endAngle,bAntiClockwise);

属性解释：

x,y:中心点
radius：半径长度
startAngle:开始弧度
endAngle:结束弧度
bAntiClockwise:是否逆时针

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制圆形和弧形</title>
</head>
<body>
<canvas id="cavsElem" width='400' height="300">
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
    /* 绘制圆形*/
    //获得画布并上下文对象
    var context = document.getElementById('cavsElem').getContext('2d');
    context.beginPath();//开始路径
    context.arc(100,100,100,0,2*Math.PI,true);//绘制圆形，true为逆时针
    context.closePath();//关闭路径
    context.fillStyle = 'green';//设置填充颜色
    context.fill();//填充
    /* 绘制弧形*/
    context.beginPath();//开始路径
    context.strokeStyle = "#fff";//设置描边颜色
    context.lineWidth = 5;//设置线的粗细
    context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);//绘制弧形，false为顺时针
    context.stroke();//描边
</script>
</body>
</html>

效果如下：

在这里插入图片描述

4.绘制图片

canvas中的绘制图片其实就是把一幅图放在画布中

//绘制原图
context.drawImage(image,dx,dy)
//缩放绘图
context.drawImage(image,dx,dy,dWidth,dHeight)
//切片绘图
context.drawImage(image,sx,sy,sWidth,sHeigh,dx,dy,dWidth,dHeight)

5.canvas其他方法：

clip()方法用于从原始画布剪切任意形状和尺寸的区域
save()方法用来保存画布的绘制状态
restore()方法用于移除自上一次调用save()方法所添加的任何效果

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>clip()剪切任意形状和尺寸区域</title>
</head>
<body>
<canvas id="cavsElem" width="300" height="200" >
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
    //获得画布
    var canvas=document.getElementById('cavsElem');
    //设置画布边框
    canvas.style.border="1px solid #000";
    //获取上下文
    var context = canvas.getContext('2d');
    // 剪切矩形区域
    context.rect(50,20,200,120);//(x,y,width,height)
    context.stroke();//描边
    context.clip();
    // 在 clip()之后绘制圆形,只有被剪切区域的内圆形可见
    context.arc(200,100,70,0,2*Math.PI,true);//(x,y,半径,开始弧度，结束弧度，true代表逆时针绘制圆形)
    context.fillStyle="pink";
    context.fill();//填充
</script>
</body>
</html>