html5中canvas的一些基本操作

最新推荐文章于 2023-03-07 16:44:05 发布

kaiwen310

最新推荐文章于 2023-03-07 16:44:05 发布

阅读量344

点赞数

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/qq_47051731/article/details/106532425

版权

一、绘制圆形

1、开始创建路径

使用图形上下文对象的beginPath方法。
context.beginPath（）;

2、创建图形路径

创建圆形路径时，需要使用图形上下文对象的arc方法。
context.arc（x,y,radius,starAngle,endAngle,anticlockwise）
x是绘制圆形的起点横坐标，y是绘制圆形起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度，anticlockwise是否按顺时针方向绘制。
绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使用以下这个方法，把角度换成弧度。
var radius = degrees* Math.PI/180这个里面的Math.PI表示的角度是180度Math.PI*2的角度是360度。

3、创建完成关闭路径

使用图形上下文对象的closePath方法将路径关闭。
context.closepath();

4、设置绘制样式然后调用绘制方法进行绘制

context.fillStyle = ‘rgba(255,0,0,0.25)’;
context.fill();

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas绘制圆形</title>
    <script type="text/javascript" src="canvas.js"></script>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "#f1f2f3";
    context.fillRect(0,0,400,400);
    for(var i=0;i<10;i++){

        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);

        context.fillStyle = "rgba(255,0,0,0.25)";
        context.fill();

    }
}

网页显示内容：
在这里插入图片描述

二、绘制文字

1、设置文字字体

context.font = "font-weight font-size font-family ";
context.font有三个参数：
第一个参数font-weight
第二个参数font-size规定文本的字体尺寸
第三个参数font-family 规定文本的字体

2、设置文字垂直对齐方式

context.textBaseline = ‘alphabetic’;
属性值可以是：
top（顶部对齐）
hanging（悬挂）
middle（中间对齐）
bottom（底部对齐）
alphabetic是默认值

3、设置文字水平对齐方式

conText.textAlign = “start”
属性值可以设置为：
start、end、left、right、center。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas绘制文字</title>
    <script type="text/javascript" src="canvas.js"></script>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="800" height="300" ></canvas>
</body>
</html>

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = 'blue';
    context.fillRect(0,0,800,300);
    context.fillStyle = '#fff';
    context.strokeStyle = '#fff';
    context.font = "bold 40px '字体','字体','微软雅黑','宋体'";
    context.textBaseline = 'hanging';
    context.fillText('kaiwen310' ,10 ,40);
    context.fillText('html',40,110);
    context.fillText('canvas基本操作',400,180);

}

网页内容显示：
在这里插入图片描述

三、保存文件

很多时候绘制完成的图片需要保存，那么我们就可以使用到Canvas API来完成这最后一步！
Canvas API使用toDataURL方法把绘画的状态输出到一个 data URL中然后重新装载，然后我们就可以把重新装载后的文件直接保存。
Canvas API保存文件的原理实际上就是把我们绘画的状态动态输出到一个data URL地址所指向的数据中的过程。
什么是data URL ?
data URL实际上就是base64位编码的URL,主要用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像文件。
data URL的格式 “data:image/jpeg;base64,/9j/4…”
toDataURL的使用方法
canvas.toDataURL（type）;
这个方法使用一个参数type，表述输出数据的MIME类型。
什么是MIME类型：
jpg image/jpeg

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas图形保存</title>
    <script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "blue";
    context.fillRect(0,0,400,300);
    window.location = canvas.toDataURL('image/png');
}

kaiwen310

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5中canvas的一些基本操作

一、绘制圆形1、开始创建路径使用图形上下文对象的beginPath方法。context.beginPath（）;2、创建图形路径创建圆形路径时，需要使用图形上下文对象的arc方法。context.arc（x,y,radius,starAngle,endAngle,anticlockwise）x是绘制圆形的起点横坐标，y是绘制圆形起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度，anticlockwise是否按顺时针方向绘制。绘制半径与
复制链接

扫一扫