Canvas2D属性和方法

最新推荐文章于 2023-10-19 19:49:42 发布
最新推荐文章于 2023-10-19 19:49:42 发布
阅读量827 收藏 4
点赞数 4
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45806781/article/details/113880693
版权

Canvas2D属性和方法

一、Canvas2D模型的属性

  • 1.canvas
  • 在对象CanvasRenderingContext2D的原型对象上可以添加方法 直接调用使用
  • 2.context.canvas----返回当前操作的canvas对象（只读）
	console.log(context.canvas);

在这里插入图片描述

  • 3.fillStyle：给canvas中的各种图形填充样式，默认填充样式是黑色#000。
  • 语法：
	context.fillStyle = color;
	context.fillStyle = gradient;
	context.fillStyle = pattern;

在这里插入图片描述

  • 4.font：用于在canvas文本绘制时候的字号字体控制，默认是10px,sans-serif.
  • 语法：
	context.font = value;
  • value就是字号字体值。
  • 5.globalAlpha：设置画布的全局透明度，范围是0-1，0表示完全透明，1表示完全不透明。
  • 语法：
	context.globalAlpha = value;
  • 其中value就是设置的全局透明度，范围是0到1。
  • 6.globalCompositeOperation：设置canvas图形的混合模式。可以衍生很多效果，例如遮盖、剪裁、改变绘制图形的上下层叠关系。
  • 语法
	context.globalCompositeOperation = type;
  • 其中type就是混合类型。
  • 7.lineCap：表示线条端点的样式。
  • 语法
	context.lineCap = 'butt';
	context.lineCap = 'round';
	context.lineCap = 'square';

在这里插入图片描述
在这里插入图片描述

  • 8.lineJoin：表示线条转角的样式。
  • 语法
	context.lineJoin = 'miter';
	context.lineJoin = 'round';
	context.lineJoin = 'bevel';

在这里插入图片描述

  • 9.lineWidth：表示线宽。默认值是1.0.
  • 语法
	context.lineWidth = value;
  • value表示线的宽度。数值类型，默认值是1.0。
  • 10.shadowBlur：阴影的模糊程度。
  • 语法
	context.shadowBlur = value;
  • value表示阴影的模糊程度，可以是小数，默认是0.
  • 11.shadowColor：阴影的颜色，默认是透明黑。
  • 语法
	context.shadowColor = color;
  • 12.shadowOffsetX：阴影的水平偏移大小。
  • 语法
	context.shadowOffsetX = offset;
  • offset表示偏移的大小，默认是0，数值型。
  • 13.shadowOffsetY：阴影的垂直偏移大小。
  • 语法
	context.shadowOffsetY= offset;
  • offset表示偏移的大小，默认是0，数值型。
  • 14.strokeStyle：用来设置描边的样式。可以是路径的描边，也可以是形状的描边，也可以是文字的描边，描边的样式也不仅限于颜色。
  • 语法
	context.strokeStyle = color;
	context.strokeStyle = gradient;
	context.strokeStyle = pattern;

在这里插入图片描述

  • 15.textAlign：用在文本绘制的时候。可以指定文本的水平对齐方式。
  • 语法
	context.textAlign = value;

在这里插入图片描述

  • 16.textBaseline：用在文本绘制的时候。可以指定文本对齐的基线。
  • 语法
	context.textBaseline = value;

在这里插入图片描述
在这里插入图片描述

canvas2D属性案例—绘制文本

<canvas id="canvas"></canvas>
<script>
   var sw = screen.availWidth;
   var sh = screen.availHeight;
   canvas.width = sw;
   canvas.height = sh;
   var conText2D = canvas.getContext('2d');
   //绘制文本
   conText2D.font = "40px 楷体";
   conText2D.fillStyle = 'blue';
   conText2D.globalAlpha = 1;
   conText2D.shadowBlur = 10;
   conText2D.shadowColor = 'yellow';
   conText2D.shadowOffsetX = 10;
   conText2D.shadowOffsetY = 10;
   conText2D.fillText('赵佳敏',100,100,300);
   conText2D.textBaseline = 'bottom';
   conText2D.beginPath();
   conText2D.moveTo(100,110);
   conText2D.lineTo(250,110);
   conText2D.closePath();
   conText2D.strokeStyle = 'orange';
   conText2D.strokeText('小赵',100,200,300);
   conText2D.stroke();
</script>

在这里插入图片描述

二、Canvas 2D模型的方法

  • 1.arc()—用来绘制圆弧。由于圆本质上就是个封闭圆弧，因此，此方法也可以用来绘制正圆。
  • 语法
	context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

在这里插入图片描述

  • 2.fillText()–用来填充文字，绘制纯文本。
  • 语法
	context.fillText(text, x, y [, maxWidth]);

在这里插入图片描述

  • 3.strokeText()—绘制描边文本
  • 语法
	context.strokeText(text, x, y [, maxWidth]);

在这里插入图片描述

  • 4.fill()—内部填充
  • 语法
	context.fill();
	context.fill(fillRule);
	context.fill(path, fillRule);

在这里插入图片描述

  • 5.stroke()—对路径进行描边
  • 语法
	context.stroke();
	context.stroke(path);//path：指Path2D对象。
  • 6.arcTo()—给路径添加圆弧，需要指定控制点和半径。常用于绘制标准圆角。
  • 语法
	context.arcTo(x1, y1, x2, y2, radius);

在这里插入图片描述

  • 7.bezierCurveTo()—用来绘制贝塞尔曲线。需要三个控制点，前两个是控制点，第三个点是结束点，而起始点是当前路径的最后一个控制点，如果之前并无路径，可以使用moveTo()作为起始点。
  • 语法
	context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

在这里插入图片描述

案例1—绘制圆弧

   conText2D.beginPath();
   conText2D.strokeStyle = 'red';
   conText2D.arc(500,500,50,0,Math.PI * 2,true);
   //绘制半圆
   //conText2D.arc(300,300,50,0,Math.PI/2,true);
   //conText2D.stroke();
   conText2D.fill();
   conText2D.closePath();

在这里插入图片描述

   conText2D.beginPath();
   conText2D.lineWidth = 5;
   conText2D.moveTo(100,300);
   conText2D.arcTo(200,350,250,280,40);
   conText2D.lineTo(250,280);
   conText2D.stroke();
   conText2D.closePath();

在这里插入图片描述

   conText2D.beginPath();
   conText2D.moveTo(400,200);
   conText2D.bezierCurveTo(430,50,580,400,700,200);
   conText2D.stroke();
   conText2D.closePath();

在这里插入图片描述

  • 8.fillRect()—绘制区域，矩形填充方法。
  • 语法
	context.fillRect(x, y, width, height);

在这里插入图片描述

  • 9.strokeRect()—实现矩形描边效果。
  • 语法
	context.strokeRect(x, y, width, height);

在这里插入图片描述

  • 10.clearRect()—清除区域。把某块矩形区域变成透明的。
  • 语法
	context.clearRect(x, y, width, height);

在这里插入图片描述

案例2—绘制矩形

   conText2D.beginPath();
   conText2D.strokeStyle = 'blue';
   conText2D.strokeRect(800,100,200,200);
   conText2D.stroke();

   conText2D.fillStyle = 'green';
   conText2D.fillRect(1050,100,200,200);
   conText2D.fill();
   conText2D.closePath();

在这里插入图片描述

案例3—清除区域

   conText2D.beginPath();
   conText2D.fillStyle = 'green';
   conText2D.fillRect(1050,100,200,200);
   conText2D.fill();
   conText2D.closePath();
   //清除区域
   conText2D.clearRect(1100,200,50,50);

在这里插入图片描述

  • 11.moveTo()–路径绘制的点移动到，通常表示路径绘制的起始点。
  • 语法
	context.moveTo(x, y);
  • 12.lineTo()—绘制直线以连接当前最后的子路径点和lineTo()指定的点。、
  • 语法
	context.lineTo(x, y);
  • 13.clip()—路径剪裁。使用时，先绘制裁剪路径，执行clip()的内容就在这个剪裁路径中呈现。
  • 语法
	context.clip();
	context.clip(fillRule);
	context.clip(path, fillRule);

在这里插入图片描述

  • 14.drawImage()—绘制图像
  • 语法
	context.drawImage(image, dx, dy);
	context.drawImage(image, dx, dy, dWidth, dHeight);
	context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

在这里插入图片描述
在这里插入图片描述

案例4—绘制图像（裁剪）

   //绘制图像
   conText2D.beginPath();
   var image = new Image();
   image.src = './img/2.jpg';
   //设置裁剪的路径
   conText2D.moveTo(150,0);
   conText2D.lineTo(150,300);
   conText2D.lineTo(300,300);
   conText2D.lineTo(150,0);
   conText2D.clip();
   //conText2D.drawImage(image,0,0,200,200);
   conText2D.drawImage(image,0,0,500,500,0,0,300,300);
   conText2D.closePath();

在这里插入图片描述

  • 15.createImageData()—创建image图像数据,也就是创建一个全新的空的ImageData对象。
  • 语法
	context.createImageData(width, height); 
	context.createImageData(imagedata);

在这里插入图片描述

  • 16.putImageData()—绘制imageData对象到指定位置。
  • 语法
	context.putImageData(imagedata, dx, dy);
	context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

在这里插入图片描述
在这里插入图片描述

案例5—点阵图效果

   var sw = document.documentElement.clientWidth;
   var sh = document.documentElement.clientHeight;
   canvas.width = sw;
   canvas.height = sh;
   var context = canvas.getContext('2d');
   var imageData = context.createImageData(300,150);
   for(var i = 1;i<=300;i+=5){
       for(var k = 1;k<=150;k+=5){
           var index = 4*((i-1)+300*(k-1));
           imageData.data[index] = 0;
           imageData.data[index+1] = 128;
           imageData.data[index+2] = 0;
           imageData.data[index+3] = 256;
       }
   }
   context.putImageData(imageData,100,100);

在这里插入图片描述

  • 17.getImageData()—返回一个ImageData对象，其中包含Canvas画布部分或完整的像素点信息。
  • 语法
	context.getImageData(sx, sy, sWidth, sHeight);

在这里插入图片描述

案例6—把图片某块区域变成灰色。

   //获取图像像素点信息
   var image = new Image();
   image.src = './img/2.jpg';
   context.drawImage(image,300,0,300,300);
   var datapx = context.getImageData(450,0,150,150);
   var length = datapx.data.length;
   for(var i = 1;i<length;i+=4){
       var r = datapx.data[i];
       var g = datapx.data[i+1];
       var b = datapx.data[i+2];
       var gray = r * 0.299 + g * 0.587 + b * 0.114;
       datapx.data[i] = gray;
       datapx.data[i+1] = gray;
       datapx.data[i+2] = gray;
   }
   context.putImageData(datapx,450,0);

在这里插入图片描述

  • 18.save()—保存当前Canvas画布状态并放在栈的最上面.
  • 语法
	context.save();
  • 19.restore()—依次从堆栈的上方取出储存的canvas状态。
  • 语法
	context.restore();
  • 20.rotate()—给canvas画布添加旋转矩阵。
  • 语法
	context.rotate(angle);

在这里插入图片描述

  • 21.translate()—对canvas坐标系进行整体位移。
  • 语法
	context.translate(x, y);

在这里插入图片描述

  • 22.scale()—缩放canvas画布的坐标系。
  • 语法
	context.scale(x, y);

在这里插入图片描述

南初️
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
理解canvas元素，绘制简单2D绘图形
芳草萋萋鹦鹉洲哦
05-22 1125
JavaScript 代码可以访问该区域动态在上面绘制图片，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。canvas最早是苹果公司提出并准备用在控制面板中的，随着其他浏览器的迅速跟进，HTML5 将其纳入标准。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。因为这个方法是后来才增加到规范中的，所以支持的浏览器也是在后面的版本实现的，包括 IE9、Firefox 3.5 和 Opera 10。如果你要给每个图形上。
详解如何解决canvas图片getImageData,toDataURL跨域问题
09-22
主要介绍了详解如何解决canvas图片getImageData,toDataURL跨域问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5 <canvas> 参考手册
奋斗的日子最甜美，在科技的海洋里，永无止境。
01-02 1261
HTML5  参考手册 描述 HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 本手册提供完整的 getContext("2d") 对象的属性和方法，可用
7、canvas有哪些属性
abuanden的博客
02-26 4372
canvas什么是canvas常用的方法1.样式：2.画矩形：3.画路径4.画圆5.曲线6.new Path2D():创建一个2d路径对象，对此对象进行操作，最后成为stroke()或fill()的参数。7.渐变8.模式9.阴影10.绘文字11.图像12.保存和恢复状态13.动画14.合成15.clip()剪切路径16.获取上下文的像素数据17.将像素数据绘制到上下文中18.保存图像19.命中区域20.聚焦环21.基于canvas封装的代码片段（https://developer.mozilla.org/e
canvas2D绘图环境属性
书香水墨
04-14 447
属性 简介 canvas 指向该绘图环境所属的canvas对象。该域性最常见的用途就是通过它来获取 canvas 的宽度与高度，分別调用 context.canvas.width 与 context.canvas.height 即可 fillstyle 指定该绘图坏境在后续的图形填充操作中所使用的颜色、渐变色或图案 font 设定在调用绘图环境对象的fillText()或s...
Canvas—2D 绘图
青蛙king的博客
06-09 4608
HTML5 中 新增了 <canvas> 元素。 <canvas> 元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态的在这个区域内绘制图形。
Canvas 2D详解
石璞东
05-09 1070
快速入门canvas
vue3使用AntV7|L7的平面区域标注图时出现警告:Canvas2D: Multiple readback operations using getImageData are faster...
m0_71683629的博客
10-19 4833
vsc工具、node16.20、vue3,解决方法,替换为旧版本
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
基于canvas 2D(高性能)实现微信小程序自定义组件-环形进度条 可定义大小,颜色,渐变等,也可自行扩展更多属性
canvas线条的属性详解
12-14
一、线条的帽子lineCap...var context=canvas.getContext("2d"); context.lineWidth=40; context.strokeStyle="#005588"; //三个beginpath()画了3条平行线 context.beginPath(); context.moveTo(100,200); context.line
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
12-13
使用HTML5 Canvas绘制多边形所需的CanvasRenderingContext2D对象的主要属性和方法(有「()」者为方法)如下： 属性或方法 基本描述 strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个...
详解HTML5 canvas绘图基本使用方法
12-13
<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步： 获取<canvas>元素对应的DOM对象，这是一个Canvas对象； 调用Canvas对象的...
PixelBlender:HTML5 canvas 2d图像处理助手
05-15
g，b，a）对象构造函数-Pixel.red.green.blue.alpha属性Pixel 2d Matrix对象构造函数-新的PixelMatrix（data）--- pixelMatrix [x] [y]像素坐标访问数据数组到PixelMatrix CoDecs-dataArrayToPixelMatrix（Canvas....
Canvas——2D上下文
前端萌新一枚
09-13 3452
Canvas——2D上下文 一、基本概念 使用2D绘图上下文提供的方法，可以绘制简单的2D图形，比如矩形、弧线和路径 2D上下文的坐标开始于&amp;amp;amp;amp;amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;amp;amp;amp;amp;gt;元素的左上角，原点坐标(0,0)。所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下 默认情况下，width和height表示水平和垂直两个方向上可用
用 scale 打造自由缩放的 canvas 画布
纯爱枫若情的博客
08-29 4423
虽然本身是一枚前端数据可视化工程师，但是说实话，由于本身从事这一行的时间并不长，因此对于一些基础的知识，了解的其实并不透彻，也就是俗话说的，知其然不知其所以然吧。 目前，对于前端的数据可视化来说，主要有三种不同的方向吧，分别是canvas 2d，canvas 3d webgl 以及 svg。这三种方式各有优劣吧，对于不同的场景，相互配合起来，才能发挥最大的作用。 因此对于一个前端数据可视化工程师来...
vue集成高德地图
weixin_44890199的博客
04-03 650
高德地图
解决canvas图片getImageData,toDataURL跨域问题
weixin_45866907的博客
08-02 8845
解决canvas图片getImageData,toDataURL跨域问题
wpf canvas 2d
最新发布
12-14
Canvas是WPF中的一个基本容器，用于放置和控制其他可视元素的位置和大小。 Canvas是一个二维平面，可以类比为一个画布。在Canvas中，我们可以使用坐标系来确定可视元素的位置。通过设置元素的Left和Top属性，我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南初️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值