canvas(画布)主要是位图  svg(矢量图)

  canvas标签,必须要写的3个属性 id  width  height  

  为什么不再style中设置width和height呢?

    因为这设置width和height话会有位移差;

    位移差:在画布里面的元素有偏差;

  js中每次使用canvas,都要设置一个绘图环境,然后会得到一个对象,然后对其进行操作;

  var c=document.getElementById("") canvas标签的id值;

  var d=c.getContext("2d")  设置绘图属性;

  然后得到d这个对象,就可以对其进行操作元素里面的属性和方法;

  方法和属性(带()的是方法,不带的是属性):

    fillRect():绘制一个填充方块,默认颜色是黑色; 参数:x,y,w,h    (坐标和宽高)

    fillStyle:填充颜色  属性值:想要的颜色;

    strokeRect():绘制边框的方框; (如果绘制边框的话,会有2px的偏差,所以设置坐标的话需要在原有的基础上加上0.5),参数同fillRect()

    

    lineWidth:边框粗细;

    strokeStyle:线条颜色;

    lineJoin:边框圆角 属性值:round 圆,  

    lineCap:线条圆角;

    绘制线条

      moveTo():绘制线段的起点  参数  x,y   坐标位置;

      lineTo():绘制线段的领点  参数 x,y  坐标位置 ;  (最后一个lineTo就代表终点)

    线条只能有一个moveTo(),但却可以有很多lineTo()

    stroke()  绘制线段;

  beginPath  开始路径  必须要写对应的关闭路径  

  closePath  关闭路径

  两者同时出现,将绘制路径闭合,起始点和结尾点,首尾相连;

  rect()  绘制方块,及不带填充色和线框;

  fill()  填充颜色;

  clearRect(x,y,width,height)  清除矩形区域

  save()  restore()  这两个方法成对出现,中间的属性样式,之影响内部,不影响外部;

  画圆:

    arc():参数(x,y,半径,开始弧度,结束弧度,时针方向);

    x,y坐标  半径,圆的大小,  开始弧度,一般都是0,结束弧度,一般都是 (0-360)*Math.PI/180,  时针方向,true 逆时针,false 顺时针;

    

    translate()  平移,画布大小位置不变,起始坐标变了   参数 x,y

  

  旋转:rotate()  同translate原理;

  需注意一点,需要先通过  translate()  确定起始坐标点,在来操作rotate会比较好

  缩放:scale(0.5,0.5)  画布缩放,就是将画布向后移动,跟人的视距就远了,近大远小;

  画布中插入图片;drawImage()

    var img=new Image()  

    img.src="图片路径"  

    img.onload=function(){

      d.drawImage(img,x,y,w,h)    d就是画布对象,img图片对象,坐标宽高,drawImage()在画布中插入图片

    }    

  插入文字:

    strokeText()  插入的文字带边框  参数:   "输入的内容" , x , y  (坐标)

    fillText()    不带边框    参数同strokeText()

    textAlign:相对字体的起始点,水平居中

    textBaseline:移到字体的起始点,垂直居中

    font:字体大小和字形

  

canvas介绍(画布)的更多相关文章

  1. HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

    欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...

  2. canvas介绍和用途

    canvas介绍和用途 canvas(画布)主要是位图 svg(矢量图) canvas标签,必须要写的3个属性 id width height 为什么不在style中设置width和height呢? ...

  3. Android绘图基础Paint和Canvas介绍-android学习之旅(六十一)

    canvas介绍 Paint类介绍 代码示例 效果图

  4. 安卓自定义View进阶-Canvas之画布操作 转载

    安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...

  5. HTML5中canvas介绍

    1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...

  6. Canvas对画布及文字控制基础API学习

    这次纯API练习,比较简单,但是是为了之后的结合项目打基础的,所以也不能忽视它,下面开始: Canvas的平移.旋转.缩放 这里还是以上次画那个青春痘的DEMO为例[http://www.cnblog ...

  7. (网页)html5 canvas清空画布方法(转)

    总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas() { v ...

  8. Wpf 之Canvas介绍

    从这篇文章开始是对WPF中的界面如何布局做一个较简单的介绍,大家都知道:UI是做好一个软件很重要的因素,如果没有一个漂亮的UI,功能做的再好也无法吸引很多用户使用,而且没有漂亮的界面,那么普通用户会感 ...

  9. canvas:画布

    画布有默认宽度,如果要自己设置宽带要写在属性上 列: <canvas id = "myCanvas" width = "600" height = &qu ...

随机推荐

  1. RabbitMq学习5-路由(Routing)

    一.路由(Routing) 在前面的教程中,我们实现了一个简单的日志系统.可以把日志消息广播给多个接收者. 本篇教程中我们打算新增一个功能——使得它能够只订阅消息的一个字集.例如,我们只需要把严重的错 ...

  2. P-残缺的棋盘

    Input 输入包含不超过10000 组数据.每组数据包含6个整数r1, c1, r2, c2, r3, c3 (1<=r1, c1, r2, c2, r3, c3<=8). 三个格子A, ...

  3. W3C标准下的盒模型与IE盒模型

    标准盒模型如下图所示: IE下盒模型如下图所示:

  4. spring security OAuth2.0之客户端Client的实现

    项目代码:https://github.com/hankuikuide/microservice-spring-security-oauth2 网上多数的项目客户端都是采用纯js写,或用postman ...

  5. 如何将DataTable转换成List<T>

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  6. mongodb连接警告修复

    问题 Node.js中mongoose模块连接MongoDB数据库时提示(node:12580) DeprecationWarning: current URL string parser is de ...

  7. SpringAOP用到了什么代理,以及动态代理与静态代理的区别

    spring aop (面向切面)常用于数据库事务中,使用了2种代理. jdk动态代理:对实现了接口的类生成代理对象.要使用jdk动态代理,要求类必须要实现接口. cglib代理:对类生成代理对象. ...

  8. Pure播放器

    我是的本地应用,并不会拿你的隐私数据.

  9. jQuery进阶第二天(2019 10.10)

    一.事件流程 1.事件的三要素: 事件源:发生事件的对象 事件类型:类型比如单击.双击.鼠标的移入.移除 事件处理程序: 触发事件之后做些什么,事件处理的函数 <body> <but ...

  10. webstorm 打开后目录结构不完整

    问题: webstorm自动生成的配置文件.idea/modules.xml损坏了,其实是我把这个.idea目录整个删了 解决方法: 1.删除本地目录历史 点击close Project(若是打开多个 ...