HTML5福利篇--使用Canvas画图

前段被迫创业

已于 2023-09-22 23:16:41 修改

阅读量2.3k

点赞数 1

分类专栏：前端学习文章标签： html5 前端 html

于 2023-09-22 23:16:21 首次发布

本文链接：https://blog.csdn.net/weixin_63009369/article/details/133131866

版权

浏览器不支持

摘要由CSDN通过智能技术生成

一.Canvas元素

1.Canvas元素定义

2.使用JavaScript获取页面中的Canvas对象

（3）fillRect()和clearRect()函数

一.Canvas元素

Canvas是画布的意思，这个是HTML5中新出现的元素，可以在页面中定义一个画布，实现绘图功能

1.Canvas元素定义

语法：

<canvas id="xxx" height= width= >当浏览器不支持Canvas时，显示这里的文字</canvas>

id 画布元素的标识

height 画布高

width 画布宽

例如定义一个画布：

<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>

2.使用JavaScript获取页面中的Canvas对象

在JavaScript中可以用document.getElementById()方法获取网页中的对象，获得对象后，通过getContext()函数获得对象的2d上下文对象，就可以在画布上进行绘画了

语法：

docment.getElementById(ObjectId)

例：

<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
    var c=document.getElementById("canvas"); //获得画布对象
    var d=c.getContext("2d");  //获得2d上下文对象
</script>
</body>

二.绘制图形

1.绘制直线

beginPath() 开始绘图函数

moveTo() 该函数将坐标移动到指定坐标，函数参数为x，y

lineTo() 绘制直线

stroke() 绘制图形的边界轮廓

例如绘制三角形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>

   </style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
    function f() {
        var c=document.getElementById("canvas"); //获得画布对象
        var d=c.getContext("2d");  //获得2d上下文对象
        d.beginPath();   //开始绘图
        d.moveTo(100,0)     //将直线移动到绘图起点坐标
        d.lineTo(50,100);
        d.lineTo(150,100);
        d.lineTo(100,0);
        d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
        d.stroke();         //绘制轮廓
    }
   window.addEventListener("load",f,false);
</script>
</body>
</html>

效果：

又例如绘制复杂图案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
    function f() {
        var c=document.getElementById("canvas"); //获得画布对象
        var d=c.getContext("2d");  //获得2d上下文对象
        var dx=150;
        var dy=150;
        var s=100;
        d.beginPath();   //开始绘图
        var x=Math.sin(0);
        var y=Math.cos(0);
        var dig=Math.PI/15*11;
        for(var i=0;i<30;i++){
            var x=Math.sin(i*dig);
            var y=Math.cos(i*dig);
            d.lineTo(dx+x*s,dy+y*s);
        }
        d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
        d.stroke();         //绘制轮廓
    }
    window.addEventListener("load",f,true);
</script>
</body>
</html>

效果:

2.绘制矩形

可以通过rect()函数和strokeRect()函数绘制矩形，调用fillRect()填充指定矩形的区域，调用clearRect()可以擦除指定区域的矩形

（1）rect()

该函数用来绘制矩形，语法：

Rect(x,y,width,height)

x,y 表示矩形的起点

width，height 表示矩形的长和宽

（2）strokeRect()

该函数和rect()函数差不多，都是绘制矩形，但该函数绘图时不需要像rect()一样调用beginPath()和closePath(),语法：

storkeRect(x,y,width,height)

（3）fillRect()和clearRect()函数

fillRect()绘制有填充的矩形，语法：

fillRect(x,y,width,height)

clearRect()清除矩形，语法：

clearRect(x,y,width,height)

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
    function f() {
        var c=document.getElementById("canvas"); //获得画布对象
        var d=c.getContext("2d");  //获得2d上下文对象

        d.strokeRect(360,