canvas总结

最新推荐文章于 2022-11-08 16:22:43 发布

h_y_

最新推荐文章于 2022-11-08 16:22:43 发布

阅读量302

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/m0_46549742/article/details/107324928

版权

一、什么是canvas？

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (JavaScript)来完成。可以通过多种方法使用 canvas 绘制路径,矩形、圆、字符等。
注：<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

二、canvas属性

1.width属性
设置canvas画布的宽：

canvas.width = 800;

2.height属性
设置canvas画布的高：

canvas.height = 600;

三、canvas方法

1、将canvas转化为2D模型

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

2、返回Canvas图像对应的data URI
即返回base64地址；格式：

<canvas width="10" height="10"></canvas>
//返回此Canvas的data-URL：
var canvas = document.querySelector('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);

四、绘制

1、属性
（1）设置颜色：fillStyle
可以给canvas中各种图形添加颜色，默认为黑色。
语法：

context.fillStyle = color;//纯色填充：颜色，rgb值，或者16进制值
context.fillStyle = gradient;//渐变填充
context.fillStyle = pattern;//纹理填充

纯色填充：

    context.fillStyle = "red";
    context.fillRect (20,20,50,50);
    context.fill();

渐变填充：线性；

<canvas id="canvas"></canvas>
 var canvas = document.querySelector("#canvas");
 var context = canvas.getContext("2d");
 var txt=context.createLinearGradient(400,20,600,20);
 txt.addColorStop (0,"red");
 txt.addColorStop (0.1,"orange");
 txt.addColorStop (0.3,"yellow");
 txt.addColorStop (0.5,"green");
 txt.addColorStop (0.7,"blue");
 txt.addColorStop (1,"purple");
 context.fillStyle = txt;
 context.font = "30px 幼圆";
 context.fillText ("Canvas  官网",400, 50, 200);

在这里插入图片描述
图片填充：

<canvas id="canvasPattern"></canvas>
var canvasPattern = document.getElementById("#canvasPattern");
var contextPattern = canvasPattern.getContext('2d');

var imagePattern = document.createElement("img");
imagePattern.onload = function () {
    // 图片缩放到50*50大小
    var canvas = document.createElement("canvas");
    canvas.width = canvas.height = 50;
    var context = canvas.getContext("2d");
    // 通过drawImage()方法缩放
    context.drawImage(this, 0, 0, 50, 50);
    
    var pattern = contextPattern.createPattern(canvas, "repeat");
    // 填充图案
    contextPattern.fillStyle = pattern;
    contextPattern.fillRect(10, 10, 100, 100);
};
imagePattern.src = "./pattern.jpg";

（2）字体设置
①font:控制canvas文本绘制的字体字号。

<canvas id="canvas"></canvas>
 var canvas = document.querySelector("#canvas");
 var context = canvas.getContext("2d");
context.font ="30px Arial";
context.fillText ("canvas 学习 ",190,20,200);//第三个参数是字体最大宽度

②textAlign:设置文本对齐方式

context.textAlign = value;

left：文本左对齐。
right：文本右对齐。
center：文本居中对齐。
start：文本起始方位对齐。如果文本是从左往右排列的，则表示左对齐；如果文本是从右往左排列的，如设置context.direction为rtl，则表示右对齐。
end：文本结束方位对齐。如果文本是从左往右排列的，则表示右对齐；如果文本是从右往左排列的，如设置context.direction为rtl，则表示左对齐。
③textBaseline：指定文本对齐的基线。

context.textBaseline = value;

top：设定的垂直y坐标作为文本中文字符占领的区域的顶部。
middle：设定的垂直y坐标作为文本中文字符占领的区域的垂直中心位置。
alphabetic：默认值。表示的是正常文本的基线，可以看成是字母x的下边缘。即设定的垂直y坐标就是字母x的下边缘。
bottom：设定的垂直y坐标作为文本中文字符占领的的底部。

（3）画布透明度设置：globalAlpha
属性值：0~1,0表示完全透明，1表示完全不透明。

context.globalAlpha = value;

（4）线条端点样式设置：lincap
属性值：butt,round, square;默认值为butt

context.lineCap = "butt";
context.lineCap = "round";//线条两端多出一个圆弧
context.lineCap = "square";//线条两端多出一个方框，方框的宽度和线一样宽，高度是线厚度的一半。

（5）虚线绘制的偏移距离:lineDashOffset

context.lineDashOffset = value;

value:虚线起始绘制的偏移距离，为浮点型，默认值是0.0。
（6）线条转角的样式：lineJion
属性值：miter，round，bevel；默认值为miter。

context.lineJoin = "miter";//转角是尖头
context.lineJoin = "round";//转角是圆头
context.lineJoin = "bevel";//转角是平头

（7）线宽设置：linewidth
默认值是1.0，当设置0，负数时均会被忽略

context.lineWidth = value;

（8）阴影属性设置：
①shadowColor：阴影颜色设置，默认值是透明黑，即看不到颜色。

context.shadowColor = color;

②shadowBlur：阴影模糊程度设置，0表示不模糊

context.shadowBlur = value;

context.shadowColor = 'red';
context.shadowBlur = 10;
context.fillStyle = '#f0f3f9';
context.fillRect(40, 40, 160, 40);

③阴影偏移大小设置
shawdouOffsetX和shawdouOffsetY分别来设置阴影的水平偏移大小和垂直偏移大小。

    context.shadowBlur =5;
    context.shadowColor ="blue";
    context.shadowOffsetX =10;
    context.shadowOffsetY =4;
    context.font = "30px Arial";
    context.fillText ("Canvas 学习",400, 200, 200);

在这里插入图片描述
（8）设置描边样式：strokeStyle
语法：与fillStyle用法类似
context.strokeStyle = color;//纯色设置
context.strokeStyle = gradient;//渐变设置
context.strokeStyle = pattern;//纹理设置

2、方法

（1）开始路径和结束路径：
context.beginPath ()
context.closePath ()

（2）绘制直线：
moveTo（x,y）//路径绘制的起始点
lineTo（x,y）//落点的横坐标和纵坐标

（3）绘制圆弧：arc()

  context.strokeStyle ="#000";
    context.beginPath ();
    context.arc(750,50,30,0,Math.PI /2,false);//值分别为：圆心横坐标，圆心纵坐标，圆半径，开始弧度，结束弧度，绘制方向，true表示逆时针、false表示顺时针。
    context.stroke ();
    context.closePath ();

（4）给路径添加圆弧：arcTo()
context.arcTo(x1, y1, x2, y2, radius);
第1个控制点的横坐标,第1个控制点的纵坐标,第2个控制点的横坐标,第2个控制点的纵坐标,圆弧的半径。

ontext.beginPath();
context.moveTo(50, 50);
context.arcTo(150, 100, 200, 40, 40);
context.lineTo(200, 40);
context.stroke();

（5）绘制椭圆：ellipse（）

    context.restore ();
    context.strokeStyle ="pink";
    context.beginPath ();
    context.ellipse(100,200,80,40,Math.PI/4,0,Math.PI *2,false);
    //(圆心x坐标，圆心y坐标，长轴半径，短轴半径，椭圆旋转角度，圆弧开始角度，圆弧结束角度，顺时针）true表示逆时针
    context.stroke();
    context.closePath ();

（6）路径裁剪：clip
使用时，先裁剪路径，再使用clip()方法。

var image =new Image ();
    image.onload = function (){
        context.beginPath ();
        context.moveTo (300,300);
        context.lineTo (350,300);
        context.arcTo (370,280,390,300,20);
        context.lineTo (390,300);
        context.lineTo (400,300);
        context.lineTo (400,350);
        context.arcTo (420,370,400,390,20);
        context.lineTo (400,390);
        context.lineTo (400,400);
        context.lineTo (370,400);
        context.arcTo (350,420,330,400,20);
        context.lineTo (330,400);
        context.lineTo (300,400);
        context.lineTo (300,390);
        context.arcTo (320,370,300,350,20);
        context.lineTo(300,350);
        context.lineTo (300,300);
        context.clip ();
        context.closePath ();

        context.drawImage (this,0,0,800,600);


    }

    image.src ="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3509203438,204230231&fm=26&gp=0.jpg";*/

在这里插入图片描述
（7）清除区域clearRect（）
即把canvas元素中的某一矩形区域变为透明

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

矩形左上角x坐标。矩形左上角y坐标。被清除的矩形区域的高度。被清除的矩形区域的宽度。

（8）路径填充方法：
fill（）；
fillRect（）：矩形填充；

    context.fillStyle = "purple";
    context.fillRect (70,20,50,50);
    context.fill();

fillText（）：用来填充文字；

context.font ="30px Arial";
context.fillText ("canvas 学习 ",190,20,200);

（9）对路径进行描边：
stroke（）；

context.moveTo(50, 50);
context.lineTo(250, 100);
// 描边
context.stroke();

strokeRect();

context.lineWidth = 2;
context.strokeRect(75, 25, 150, 100);//矩形起点横坐标，起点纵坐标，矩形宽度，矩形高度

strokeText();

context.font = "50px STHeiti, SimHei";
context.strokeText("文字描边", 50, 90);//文本，起点横坐标，起点纵坐标

（10）画布旋转：rotate（）方法
默认旋转中心点是Canvas的左上角(0, 0)坐标点。

context.rotate(angle);

注：角度需转化为弧度值，即：角度 * Math.PI / 180

（11）缩放canvas的坐标系scale（）：

默认缩放中心点是Canvas的左上角(0, 0)坐标点。缩放值支持小数，也支持负数。

context.scale(x, y);

x：Canvas坐标系水平缩放的比例。如果值是-1，表示水平翻转。
y：Canvas坐标系垂直缩放的比例。如果值是-1，表示垂直翻转。

（12）transform（）方法：

context.transform(a, b, c, d, e, f);

属性值：
a：水平缩放。b：水平斜切。c：垂直斜切。d：垂直缩放。e：水平位移。f：垂直位移。

context.transform(1, 0, 1, 1, 0, 0);
context.fillRect(10, 20, 100, 100);

在这里插入图片描述

（13）translate()方法
translate()方法：对canvas坐标系进行整体位移。

context.translate(x, y);

x：坐标系水平位移的距离。
y：坐标系垂直位移的距离。

（14）canvas的存储和弹出
①存储canvas状态：
context.save();
无参数，无返回值。
②依次从堆栈的上方弹出canvas存储状态
context.restore();
没有参数，也没有返回值。

h_y_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas总结

一、什么是canvas？HTML5 <canvas> 元素用于图形的绘制，通过脚本 (JavaScript)来完成。可以通过多种方法使用 canvas 绘制路径,矩形、圆、字符等。注：<canvas> 标签只是图形容器，必须使用脚本来绘制图形。...
复制链接

扫一扫