Canvas

最新推荐文章于 2022-07-17 02:14:16 发布

致可乐

最新推荐文章于 2022-07-17 02:14:16 发布

阅读量252

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/ling_xy/article/details/113238874

版权

笔记专栏收录该内容

51 篇文章 1 订阅

订阅专栏

本文介绍了HTML5的Canvas元素，它是一个用于在网页上进行图形绘制的API。Canvas提供了getContext()方法来获取2D或3D绘图模型，并能通过toDataURL()将画布转换为Base64图像。2D模型中，重点讲解了fillText()和strokeText()等方法，用于在画布上填充和描边文字。

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

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是canvas？

由js代码实现功能,在 <canvas> 元素上进行绘图的一种绘图API。
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

如一些数据分析表，写特效，写网页游戏，地图API等都会用到canvas

canvas自带两个属性值：width和height，为canvas 绘制区域的宽高
注意：不要直接使用style给canvas设置宽高（元素的大小）

二、Canvas接口

1. 方法

（1）getContext （）返回绘制模型

参数为2d，返回CanvasRenderingContext2D ，二维平面绘图

<body>
<canvas id="canvas"></canvas>
<script>
    var sw=screen.availWidth;
    var sh=screen.availHeight;

    //获取canvas对象
    //设置canvas宽高尺寸
    canvas.width=sw;
    canvas.height=sh;

    //创建2D模型
    var context=canvas.getContext('2d');
    
</script>
</body>

参数为webgl，3D绘图，加速渲染3D 模型，前提是浏览器需要支持WebGL

（2）toDataURL（）将画布转化为Base64图

默认值为image/png,还可以是image/jpeg

	//转化图片
    console.log(canvas.toDataURL('image/jpeg',0.6));

2. 2D模型的方法

属性：

1.在对象CanvasRenderingContent2D的原型对象上可以添加方法，直接调用

2.context.canvas 返回当前操作的canvas对象（只读属性）

属性	作用
fillStyle	填充样式默认颜色#000
strokeStyle	描边样式默认黑色
font	设置绘制文本字体控制默认10px
globalAlpha	设置全局透明度 0-1
globalCompositeOperation	改变canvas绘图的混合模式
lineCap	线条端点的样式
lineJoin	线条转角的样式
lineWidth	设置线宽
shadowBlur	阴影的模糊程度
shadowColor	阴影的颜色
shadowOffsetX	阴影x方向偏移
shadowOffsetY	阴影y方向偏移
textAlign	绘制文本的对齐方式
textBaseline	绘制文本的基线方式

方法：

方法	作用
fillText	绘制纯文本
strokeText	绘制描边文本
fill	内部填充
stroke	填充描边
arcTo	绘制圆弧
bezierCurveTo	绘制贝塞尔曲线
fillReact	绘制区域
clearReact	清除区域
clip	剪裁（先设置裁剪路径）
createImageData	创建image图像数据
putImageData	绘制imageData对象到指定位置
save	保存当前canvas的状态在栈的最上面
restore	一次从栈的上面取出canvas的状态

1.fillText 填充文字

	//绘制文本   从底向上绘制
    conText2D.font='50px 宋体';  //加字体才会显示大小
    conText2D.fillStyle='red';
    conText2D.globalAlpha=0.5;   //透明
    conText2D.shadowBlur=2;   //阴影模糊程度
    conText2D.shadowColor='blue';
    conText2D.shadowOffsetX=5;
    conText2D.shadowOffsetY=5;
    conText2D.fillText('Hello World!',60,60,400);
    //(60,60,400)分别为起始坐标和最大限宽   x,y坐标从左下角开始算起

在这里插入图片描述
2.strokeText 描边文字

	conText2D.beginPath();
    conText2D.strokeStyle='blue';
    conText2D.font = '50px 宋体';
    conText2D.strokeText('描边文字',500,100,300);
    conText2D.closePath();