canvas图形绘制

  • 矩形绘制

rect(x,y,w,h)  没有独立路径

strokeRect(x,y,w,h) 有独立路径,不影响别的绘制

fillRect(x,y,w,h) 有独立路径,不影响别的绘制

clearRect(x,y,w,h)  需要擦除的矩形区域

  • 圆弧绘制

弧度概念

一个圆的弧度等于2π

角度弧度转化   一角度等于π/180

绘制圆弧:arc(x,y,r,startAngle,endAngle,anticlockwise);

参数:

x   圆心横坐标

y   圆心纵坐标

r    半径

startAngle   开始角度

endAngle     结束角度

anticlockwise  是否逆时针方向绘制(默认false表示顺时针,true表示逆时针)注意:在使用逆时针时,看需求是否要改变开始和结束的角度

  • 绘制文本

ctx.font=“微软雅黑”   设置字体

strokeText(text,x,y,maxWidth); /描边文字  fillText(text,x,y,maxWidth);/ 填充文字

参数:

text: 要绘制的文本

x,y :  文本绘制的坐标(文本左下角)

maxWidth:   设置文本最大宽度,可选参数

ctx.textAngle  文本水平对齐方式,相对绘制坐标来说(参数:left,center,right,start(默认),end)

ctx.direction 属性css(rtl,ltr)start和end相关

如果是ltr,start和left表现一致(ltr--从left到right)

如果是rtl,start和right表现一致(rtl--从right到left)

ctx.textBaseline 设置基线(垂直对齐方式)

top  文本的基线处于文本的正上方 并且有一段距离

middle  文本的基线处于文本的正中间

bottom  文本的基线处于文本的正下方,并有一段距离

hanging  文本的基线处于文本正上方,并且和文本粘合

alphabetic  默认值,基线处于文本的下方,并且穿过文字

ideographic和bottom相似,但是不一样//

measureText()  获取文本宽度obj.width

做动画

  • 绘制图片

drawImage();

三个参数时: drawImage(img,x,y);

  • img   图片对象,canvas对象,video对象
  • x,y    图片绘制的左上角

五个参数时:drawImage(img,x,y,w,h);

  • img   图片对象,canvas对象,video对象
  • x,y    图片绘制的左上角
  • w,h   图片绘制尺寸设置(图片缩放,不是截取)

九个参数时:drawImage(img,x,y,w,h,x1,y1,w1,h1);

  • img   图片对象,canvas对象,video对象
  • x,y    图片绘制的左上角
  • w,h   图片绘制尺寸设置(图片缩放,不是截取)
  • x1,y1,w1,h1  画布中的一个矩形区域
  • 坐标变换

平移  移动画布的圆点

translate(x.y);  参数表示移动目标点的坐标

缩放

scale(x,y);   参数表示宽高的缩放比例

旋转

rotate(angle);  参数表示旋转角度

参考文档:

w3school    http://www.w3school.com.cn/tags/html_ref_canvas.asp

Canvas_API   https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

canvas--总结二的更多相关文章

  1. 小程序canvas生成二维码图片踩的坑

    1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...

  2. 你不知道的Canvas(二)

    你不知道的Canvas(二) 一.色彩Colors 到目前为止,我们只看到过绘制内容的方法.如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fill ...

  3. canvas绘制二次贝塞尔曲线----演示二次贝塞尔四个参数的作用

    canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2); 四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始, ...

  4. 用canvas生成二维码

    $("#actimg").qrcode({                        render: "canvas",    //设置渲染方式,有tabl ...

  5. canvas生成二维码,并下载保存为本地的图片

    function getTicket(id,salt){//qrcode生成canvas二维码 $(".zc-mask").show(); $(".edit-box&qu ...

  6. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

  7. amazeui+canvas绘制二维码

    <link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/& ...

  8. canvas基础[二]教你编写贝塞尔曲线工具

    贝塞尔曲线 bezierCurveTo 在线工具 https://canvature.appspot.com/ [感觉这个好用一些] https://blogs.sitepointstatic.com ...

  9. html5 canvas 笔记二(添加样式和颜色)

    色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...

  10. FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

随机推荐

  1. 使用PyQt进行Python图形界面程序开发文章目录

    ☞ ░ 前往老猿Python博文目录 ░ PyQt入门知识原来是作为老猿Python<Python基础教程目录>后的进阶学习章节存在,最近不少专栏作者提醒老猿整体的博文内容不错,但博文没有 ...

  2. 第3.11节 Python强大的字符串格式化新功能:format字符串格式化的格式控制

                                                第3.11节 format字符串格式化的格式控制 一.    引言 上节介绍了四种format进行字符串格式化的 ...

  3. 第8.33节 Python中__getattr__以及__getattr__与__ getattribute__的关系深入剖析

    一. 引言 前面几节分别介绍了Python中属性操作捕获的三剑客:__ getattribute__方法.__setattr__方法.__delattr__方法,为什么__ getattribute_ ...

  4. PyQt(Python+Qt)学习随笔:QListView的uniformItemSizes属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的uniformItemSizes属性用于控制视图中所有项是否具有相同大小,只有在 ...

  5. 第15.19节 PyQt(Python+Qt)入门学习:自定义信号与槽连接

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 本文利用中介绍了PyQt中的信号和槽机制,除了使用PyQt组件的已有信号外,PyQt和Qt ...

  6. requests的再次学习

    title: requests模块的再次理解 date: 2020-03-10 22:44:26 tags: 1.response的解析 当requests模块发送请求后,我们会对其响应的数据也就是r ...

  7. SELECT 1,2,3...的含义及其在SQL注入中的用法

    首先,select 之后可以接一串数字:1,2,3-只是一个例子,这串数字并不一定要按从小到大排列,也不一定从1开始,这串数字的值和顺序是任意的,甚至可以是重复的,如:11,465,7461,35 或 ...

  8. 熊海CMS xhcms v1.0代码审计

    有空的时候就进行小型CMS的代码审计,这次审计的对象是熊海CMS v1.0 本地环境安装好了之后,可以看到提示安装了锁文件 说明重装漏洞应该不会存在了,这时候丢进seay代码审计系统的代码也出结果了, ...

  9. THE BUG 队第一次团队作业

    1.队名: THE BUG 队 2.队员学号: 杨梓琦 3118005115(队长) 温海源,3118005109 陈杰才,3118005089 李华,3118005097 钟明康,311800512 ...

  10. WordCounter项目(基于javase)

    1.  Github项目地址: https://github.com/Flyingwater101/WordCount 1.  PSP表格 PSP2.1 Personal Software Proce ...