canvas绘制矩形、三角形、圆形

最新推荐文章于 2023-02-20 14:33:04 发布

Flora1108

最新推荐文章于 2023-02-20 14:33:04 发布

阅读量1.2k

点赞数

分类专栏： Head First HTML5笔记文章标签： canvas

本文链接：https://blog.csdn.net/weixin_39480464/article/details/78737780

版权

Head First HTML5笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、绘制矩形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas绘制矩形</title>
        <style>
            canvas{
                border: 1px solid black;
            }
        </style>
        <script>
            window.onload = function(){
                //从DOM上得到画布对象的句柄
                var canvas = document.getElementById("canvas1");

                //请求画布提供一个可供绘制的上下文（context），在这里请求2D上下文，赋给context变量
                var context = canvas.getContext("2d");

                //定义画布的填充颜色，如省略此句代码，则默认为黑色。
                context.fillStyle = "red";

                //调用画布填充矩形的方法。
                context.fillRect(50,50,60,100);
            };
        </script>
    </head>
    <body>
        <canvas id="canvas1" width="600" height="300"></canvas>
    </body>
</html>

效果如下：
绘制矩形

方法详解：

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

其中（x,y）是矩形的起点的坐标，width，height分别定义矩形的宽和高。

2、绘制三角形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas描绘三角形</title>
        <style>
            canvas{
                border: 1px solid black;
            }
        </style>
        <script>
            window.onload = function(){
                //从DOM上得到画布对象的句柄
                var canvas = document.getElementById("canvas2");

                //请求画布提供一个可供绘制的上下文（context），在这里请求2D上下文，赋给context变量
                var context = canvas.getContext("2d");              
                //使用beginPath方法告诉画布要开始一个新路径
                context.beginPath();

                //定义路径的起点
                context.moveTo(100,150);
                //lineTo方法描路径，从起点描到(250,75)
                context.lineTo(250,75);
                //从(250,75)描到(125,30)
                context.lineTo(125,30);
                //用closePath方法闭合路径
                context.closePath();

                //设置线宽在路径上画线
                context.lineWidth = 5;
                //用线描路径
                context.stroke();
                //设置颜色来用红色填充三角形
                context.fillStyle = "red";
                //用红色填充三角形
                context.fill();
            };
        </script>
    </head>
    <body>
        <canvas id="canvas2" width="600" height="300"></canvas>
    </body>
</html>

效果如下：
绘制三角形

3、绘制圆形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas绘制圆形</title>
        <style>
            canvas{
                border: 1px solid black;
            }
        </style>
        <script>
            window.onload = function(){
                //从DOM上得到画布对象的句柄
                var canvas = document.getElementById("canvas3");
                //请求画布提供一个可供绘制的上下文（context），在这里请求2D上下文，赋给context变量
                var context = canvas.getContext("2d");              
                //使用beginPath方法告诉画布要开始一个新路径
                context.beginPath();

                //绘制圆形的方法
                context.arc(150,150,50,0,2*Math.PI,true);
                //设置线宽在路径上画线
                context.lineWidth = 5;
                //用线描路径
                context.stroke();
                //设置填充颜色为浅蓝色
                context.fillStyle = "lightblue";
                //填充颜色
                context.fill();
            };
        </script>
    </head>
    <body>
        <canvas id="canvas3" width="600" height="300"></canvas>
    </body>
</html>

效果如下：
绘制圆形

方法详解：

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

x,y：确定圆心在画布上的坐标；
radius：定义圆的半径；
startAngle，endAngle：弧的起始角和终止角确定了路径在圆上的起点和终点；
direction：角可以按照逆时针度量（角度是负的，如”-45°“），也可以按照顺时针度量（角度是正的，如”45°“），如果direction为true，就逆时针画弧，如果direction为false，就顺时针画弧。

degreesToRadians(degrees)方法详解：
在画布中，角的单位都用弧度表示，而不是度，因此定义degreesToRadians(degrees)方法，将角度转换为弧度。

function degreesToRadians(degrees){
        return (degrees * Math.PI)/180;
    }

因此，在上边绘制圆形的例子中，context.arc(150,150,50,0,2*Math.PI,true);也可以表示为context.arc(150,150,50,0,degreesToRadians(360),true);

4、一个例子
为了在画布上实现如下效果：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="smileface.js"></script>
        <title>绘制一个笑脸</title>
        <style>
            canvas{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id="smilecanvas" width="600" height="550"></canvas>
    </body>
</html>

smileface.js文件：

window.onload = function(){
    drawSmileFace();
};
function drawSmileFace(){
    var canvas = document.getElementById("smilecanvas");
    var context = canvas.getContext("2d");
    //这是圆脸
    context.beginPath();
    context.arc(300,300,200,0,degreesToRadians(360),true);
    context.fillStyle = "#ffffcc";
    context.fill();
    context.stroke();
    //这是左眼
    context.beginPath();
    context.arc(200,250,25,0,degreesToRadians(360),true);
    context.stroke();
    //这是右眼
    context.beginPath();
    context.arc(400,250,25,0,degreesToRadians(360),true);
    context.stroke();
    //这是鼻子
    context.beginPath();
    context.moveTo(300,300);
    context.lineTo(300,350);
    context.stroke();
    //这是嘴巴
    context.beginPath();
    context.arc(300,350,75,degreesToRadians(20),degreesToRadians(160),false);
    context.stroke();
}
function degreesToRadians(degrees){
        return (degrees * Math.PI)/180;
}

Flora1108

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
canvas绘制矩形、三角形、圆形

1、绘制矩形<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>canvas绘制矩形</title> <style> canvas{ border: 1px solid black; }
复制链接

扫一扫