canvas介绍和用途

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. Wpf 之Canvas介绍

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

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

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

  3. XML【介绍、用途、了解XML技术架构、语法】

    什么是XML? XML:extensiable markup language 被称作可扩展标记语言 XML简单的历史介绍: gml->sgml->html->xml gml(通用标 ...

  4. HTML5中canvas介绍

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

  5. JAR包介绍大全用途作用详解JAVA

    jta.jar 标准JTA API必要commons-collections.jar 集合类 必要antlr.jar  ANother Tool for Language Recognition 必要 ...

  6. Html5 Canvas介绍

    1. 获取绘图上下文 var mycanvas = document.getElementById('mycanvas'); var context = mycanvas.getContext('2d ...

  7. python匿名函数的介绍及用途

    匿名函数 用lambda能够创建一个匿名函数,这中函数得名于省略了用def声明函数的标准步骤. 语法 lambda [arg1 [,arg2,.....argn]]:expression 如何使用 我 ...

  8. canvas介绍(画布)

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

  9. WPF入门教程系列六——布局介绍与Canvas(一)

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

随机推荐

  1. 结对项目:求交点pro

    [2020 BUAA 软件工程]结对项目作业 项目 内容 课程:北航2020春软件工程 博客园班级博客 作业:阅读并撰写博客回答问题 结对项目作业 我在这个课程的目标是 积累两人结对编程过程中的经验 ...

  2. [BD] Hive

    简介 基于HDFS的数据仓库工具 基于HDFS上的数据分析引擎 2.x 前:SQL -----> Hive  ----> MapReduce 2.x 后:推荐执行引擎为 Spark 支持S ...

  3. [刷题] 447 Number of Boomerangs

    要求 给出平面上n个点,寻找存在多少点构成的三元组(i j k),使得 i j 两点的距离等于 i k 两点的距离 n 最多为500,所有点坐标范围在[-10000, 10000]之间 示例 [[0, ...

  4. zip密码破解小脚本

    zip密码破解小脚本 博主: 逍遥子 发布时间:2018 年 05 月 31 日 2745次浏览 1 条评论 1074字数 分类: kali 专栏 首页 正文 分享到:    文件源码 import ...

  5. window 共享打印机

    https://www.zhihu.com/question/20653708 https://h30471.www3.hp.com/t5/da-yin-ji-yu-sao-miao-yi-de-an ...

  6. python上下文管理协议,即with的详细使用

    一.with obj as f: #代码块... 二.执行流程: 1.with obj --->触发obj.__enter__(),需要在obj里写__enter__(self),在它里边写返回 ...

  7. make: g77: Command not found 修改Makefile.in中的编译文件中的g77为gfortran

    make: g77: Command not found 编译cblas时报错,这时,修改Makefile.in中的编译文件中的g77为gfortran

  8. Linux_控制作业(管理)

    一.作业控制 1.作业控制与回话 1️⃣:作业控制是shell的一种功能,它允许单个shell实例运行和管理多个命令 2️⃣:作业与在sehll提示符中输入的每个管道相关联.该管道中的所有进程均是作业 ...

  9. Heap Size 与 Stack Size

    Heap Size:如果没有用到标准库的malloc,就是废物,纯属浪费内存,所以直接设置为0即可: Stack Size :最大的可读写变量的大小即可:

  10. xshell 终端 中文乱码

    我们在终端输入命令,中文显示乱码了. 解决方案:将xshell 传输采用的默认encode改为utf-8 解决: