Canvas 绘图使用语法

最新推荐文章于 2024-04-20 16:29:18 发布
最新推荐文章于 2024-04-20 16:29:18 发布
阅读量2k 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaxheartless/article/details/51832620
版权

1、canvas标签

  <canvas  width=""  height=""  id="">

  您的浏览器不支持canvas，请更换浏览器！

*注：canvas的宽高度最好设置成行内样式，不然会等比变化

例如：在嵌入样式中设置canvas 宽高为：500px X 500px

在canvas中画100px * 100px 的矩形，矩形宽高会等比变化

500/300 : 500/150 = x/100 : y/100;

  </canvas>

 2、默认宽度300px，默认高度 150px

 3、canvas绘图环境设置

  getContext("2d"); 目前支持2d绘图环境

/*

    var can = document.getElementById("can");

    var cxt = can.getContext("2d"); //2d绘图环境，提供api[stroke、fill、etc.]

*/

4、绘图路劲:

  beginPath() :开始路劲

  closePath():结束路劲

//形成一个闭合路径

  moveTo(x,y):将触笔移动到x,y点

  lineTo(x,y):绘制到x,y点

/*绘制三角形*/



//一个起点，两个终点




  stroke(): 触笔方法 画线  默认为黑色 绘制一个空心的矩形

  fill():填充方法  绘制一个实心的矩形


  rect(x,y,w,h):矩形路劲/*x => 横坐标  y => 纵坐标 w => 宽度 h=> 高度 */


/*

cxt.rect(50,50,100,100);

cxt.stroke();

*/

  save():保存路劲

  restore():恢复路劲

/*相当于开辟一个新的空间，把这个内容放在新的空间里，画完在释放出来*/


5、绘制矩形：

  fillRect(x,y,w,h)   填充实心矩形  /*cxt.fillRect(50,50,100,100);*/

  strokeRect(x,y,w,h)  绘制空心矩形 /*cxt.strokeRect(50,50,100,100);*/

  clearRect(x,y,w,h)  清楚矩形选区

/*cxt.clearRect(0,0,can.width,can.height);清除整个canvas选区*/

6、设置绘图样式：

  fillStyle: 填充颜色

  strokeStyle: 触笔颜色

/*cxt.strokeStyle = "#03f";cxt.strokeRect(50,50,100,100);*/

  lineWidth: 触笔宽度(线宽)

/*cxt.lineWidth = 10*/


两者同时使用时显示与书写顺序有关：

7、图形边界样式：

  lineJoin : 边界连接点样式

  miter(默认值),round(圆角),bevel(斜角)

/*ctx.lineJoin="round";*/

  lineCap: 端点样式

  butt(默认值),round(圆角),square(高度多出线宽一半)

/*ctx.lineCap="round";*/

8、绘制圆形：

  arc(x,y,r,0,360,false)

        x,y  圆心坐标位置

        r 圆半径

        0,360 从0度到360度 绘制一个圆形

        true/false  顺时针/逆时针绘图
/*cxt.arc(250,250,50,0,360,false);*/

9、绘制曲线

  arcTo(x1,y1,x2,y2,r)

  x1,y1 坐标一  x2,y2坐标二   r圆弧半径

  quadraticCurveTo(dx,dy,x1,y1)

 10、 贝塞尔曲线:dx,dy控制点  x1,y1结束坐标

  bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)

  贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二

  x1,y1结束坐标

11、canvas变换

  translate(x,y)

  坐标基准点偏移 : 从起始点为基准，移动到当前位置

  rotate(弧度): 旋转  弧度公式 ：角度*Math.PI/180

  scale : scale(wb,hb)缩放比例(缩放canvas绘制的图片)

相对于前一个进行缩放

定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

弧/曲线

  • 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
  • 起始角：arc(100,75,50,0,1.5*Math.PI)
  • 结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

JavaScript 语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。


12、

绘制图片

  图片预加载，获取图片文件

  onload中调用

  drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)

设置背景

  createPattern(img,平铺方式)

   平铺方式 : repeat,repeat - x,repeat - y,no -repeat
13、 颜色渐变

  线性渐变:createLinearGradient(x1,y1,x2,y2)

            x1,y1起始坐标点

            x2,y2结束坐标点

  径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)

           x1,y1,r1内圆坐标及半径

           x2,y2,r2外圆坐标及半径

  addColorStop(位置,颜色)

  位置:渐变点  0-1之间 可多个


线性渐变：

径向渐变：

14、绘制文本

  strokeText(文本,x,y);  绘制空心文本

  fillText(文本,x,y); 绘制实心文本

  font = "font-size  font-family" 注:尺寸 字体缺一不可

  textAlign = "";文本左右对齐方式

               start center end  left right

  textBaseline文本上下对齐方式

          alphabetic  默认。文本基线是普通的字母基线。

          top  文本基线是em方框的顶端。。

         hanging  文本基线是悬挂基线。

          middle  文本基线是em方框的正中。

           ideographic  文本基线是表意基线。

          bottom  文本基线是em方框的底端。


  measureText(文本).width; 文本实际宽度(只有宽度值)


15、阴影

  shadowOffsetX,shadowOffsetY    x轴、y轴偏移

  shadowBlur    阴影模糊度

  shadowColor  阴影颜色

  默认颜色:rgba(0,0,0,0)

16、像素

  createImageData(sx,sy)

  创建新的、空白的 ImageData对象

  getImageData(x1,y1,sx,sy)【必须是同源，同一域名下】

  返回 ImageData对象，该对象为画布上指定的矩形复制像素数据  putImageData(img,x2,y2)

   把图像数据（从指定的  ImageData 对象）放回画布上

17、 合成

          globalAlpha  设置或返回绘图的当前 alpha 或透明值

          globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

  source-over默认。在目标图像上显示源图像。

  source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

  source-in  在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。

  source-out  在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

  destination-over在源图像上方显示目标图像。

  destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

  destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。

  destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

  lighter显示源图像 + 目标图像。

  copy显示源图像。忽略目标图像。

   xor使用异或操作对源图像与目标图像进行组合 。


18、 将画布导出为图片

  火狐、谷歌浏览器右键菜单可直接导出为图片

  toDataURL


19、事件 

  isPointInPath(x,y)

  如果指定的点位于当前路径中，返回布尔值

  只能判断最后绘制出来的图片



zaxheartless
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 canvas 基本语法
09-28
HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。
突破canvas语法限制 让他支持链式语法
09-28
例如，正常的Canvas绘图语句可能如下所示： ```javascript ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true); ctx.shadowColor = 'rgba(0,0,0,0.5)'; ctx.shadowBlur = "10"; // ... ``` 这样的写法虽然...
canvas基础语法
weixin_34342992的博客
08-23 120
前面的话 　　canvas顾名思义是定义在浏览器中的画布。它不仅是一个普通的元素，更是一个强大的编程工具。它的出现已然超过了web基于文档的设计初衷，将网页这一形态的应用推向了另一个高度。利用canvas，可以开发出复杂的动画、动态图表、游戏等。关于canvas，有这样一句话——canvas就像是一场文艺复兴，将编程工作者彻底释放出创造力。本文将详细介绍canvas基础知识   添加canv...
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
最新发布
Lan_0316的博客
04-20 2278
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
HTML 5 canvas —— 基本语法
Mr. David 专栏
09-29 1162
目录简述 canvas 基础 2D context API 基本线条 路径 插入图像 像素级操作 文字 阴影 颜色渐变 小节 简述HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 ca
canvas基本语法
人生就像蒲公英，看似自由，却是身不由已——《渡》
12-08 763
canvas创建<canvas id="mycanvas" width="280px" height="190px" style="border: 1px solid royalblue;"></canvas> $(function(){ var cnv = document.getElementById("mycanvas"); var cxt = cnv.getC
Canvas基础语法
Insist_bin的博客
05-11 622
1.1 什么是Canvascanvas是HTML5提供的一个用于展示绘图效果的标签，canvas原意画布，帆布，在HTML5页面中用于展示绘图效果，最早canvas是苹果提出来的一个方案，今天已经在大多数浏览器实现了1.1.1 canvas的基本用法基本语法&lt;canvas&gt;&lt;/canvas&gt;使用canvas标签，即可在页面中开辟一格区域，可以设置其width和height设...
安卓绘图 canvas 绘图 平移缩放
02-01
Canvas的translate()方法用于将绘图坐标系移动到新的位置，其语法为： ```java canvas.translate(float dx, float dy); ``` 这里的dx和dy分别代表在X轴和Y轴上的位移量。调用translate()后，所有的后续绘图操作都会...
基于HTML5 canvas绘图技术研究.pdf
01-03
"基于HTML5 canvas绘图技术研究" HTML5 是 W3C 推荐的下一代 Web 标准，它带来了许多新的特性和功能，其中 Canvas 元素是 HTML5 中的一个重要组件。Canvas 元素提供了一种使用 JavaScript 编程语言绘制图形的方法，...
fluent-canvas:HTML5 Canvas 的可链接语法。 对于可读的准系统 Canvas 绘图
07-13
用于可读的准系统 Canvas 绘图。 支持来自所有方法和属性。例子 var radius = 100, startAngle = 0, endAngle = Math.PI * 1.5;var context = FluentCanvas($("canvas"));context .beginPath() .moveTo(radius, ...
canvas入门/基础语法
weixin_53058401的博客
01-16 405
canvas入门/基础语法 web2d
canvas基本语法及实例
zhangxiang_1102的博客
02-26 962
canvas &lt; canvas&gt;标签其实就相当于一个容器，一个可以展示绘图内容的画板。我们需要通过 js 脚本往里面绘制图形。Canvas 只能展示绘图的内容， 但是不能进行绘图。最早是 苹果公司 提出的该标签。(游戏 、可视化数据(图表)、banner 广告） 1） 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸...
Canvas基本语法(1)
qq_44381874的博客
08-06 162
Canvas 1.基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function draw(){ var one = document.getElementById('one'); if(one.getContext){ var one1 = one.get
Canvas常用语法详解
SeekerTime
04-19 946
Canvas是HTML5的新增标签，通过创建画布，在画布上创建任何想要的形状。 一、标签原型<canvas width="1000" height="1000" id="demo"> 您的浏览器版本太低，不支持HTML5新增的canvas标签！ </canvas> 使用js获取画布，并指定对象<script> var demo = document.getElementById
前端之学习 canvas 的基础语法
weixin_53817560的博客
02-08 651
前端之学习 canvas 的基础语法 前言 今天，学习了 canvas 的一些语法知识和使用，在这里分享给大家一起学习交流 首先，我们应该了解 canvas 是什么，有什么用，文章最后，我们将使用 canvas 绘制一个刮刮卡的中奖特效！ 什么是 canvas 定义：是 HTML5 提供的一种新标签, ie9 才开始支持的，Canvas 是一个矩形区域的画布，可以用 JS 控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘
canvas的用法
mumu1998的博客
09-18 430
canvas很多初学的朋友们不知道它怎么用的，我们一起来学习学习吧~~ 我们小时候可能就开始画画了，都需要画板，那么这个cnvas就是我们的画板，我们需要把 画画在我们的canvas上。 但是我们的canvas就比画板高级很多啦！ 我们需要使用脚本来绘制图形，canvas只是一个容器。 首先我们需要创建一个canvas，也就是我们的画板： &lt;canvas id="myCanvas...
canvas的语法介绍及使用：
weixin_45376220的博客
09-12 540
1.canvas基本使用 ①.<canvas></canvas>默认宽高300X150，通过css设置宽高只是改变它在浏览器上的显示，把它当作图片保存下来依然是300X150，所以不要在css中设置宽高。 可以通过元素的属性改变它的宽高。 <canvas id=“myCanvas” width=“200” height=“200”></canvas>...
vue3 语法 实现 canvas 签名
05-10
可以使用 Vue3 的 `ref` 和 `canvas` 元素来实现签名功能。以下是一个简单的实现： 1. 在 Vue3 组件的 `template` 中添加一个 `canvas` 元素，并给它添加一个 `ref` 属性： ```html <template> <canvas ref="canvas"></canvas> </template> ``` 2. 在组件的 `setup` 方法中获取该 `canvas` 元素的引用，并定义一个 `draw` 方法用于绘制签名： ```javascript <script> import { ref } from 'vue'; export default { setup() { const canvasRef = ref(null); const draw = (ctx, x, y, isDown) => { if (isDown) { ctx.beginPath(); ctx.strokeStyle = 'black'; ctx.lineWidth = 2; ctx.lineJoin = 'round'; ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.stroke(); } }; return { canvasRef, draw, }; }, }; </script> ``` 3. 在组件的 `mounted` 钩子中获取 `canvas` 元素的 `2d` 绘图上下文，并添加事件监听器，监听鼠标的移动和点击事件： ```javascript <script> import { ref } from 'vue'; export default { setup() { const canvasRef = ref(null); const draw = (ctx, x, y, isDown) => { if (isDown) { ctx.beginPath(); ctx.strokeStyle = 'black'; ctx.lineWidth = 2; ctx.lineJoin = 'round'; ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.stroke(); } }; const mounted = () => { const canvas = canvasRef.value; const ctx = canvas.getContext('2d'); let isDrawing = false; let lastX = 0; let lastY = 0; canvas.addEventListener('mousedown', (e) => { isDrawing = true; lastX = e.offsetX; lastY = e.offsetY; }); canvas.addEventListener('mousemove', (e) => { if (!isDrawing) return; draw(ctx, e.offsetX, e.offsetY, isDrawing); lastX = e.offsetX; lastY = e.offsetY; }); canvas.addEventListener('mouseup', () => { isDrawing = false; }); canvas.addEventListener('mouseout', () => { isDrawing = false; }); }; return { canvasRef, mounted, }; }, mounted() { this.mounted(); }, }; </script> ``` 现在，`canvas` 元素就可以实现签名功能了。当用户在 `canvas` 上按下鼠标并移动时，会在 `canvas` 上绘制出一条曲线。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值