博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
canvas-1描线&矩形
阅读量:5948 次
发布时间:2019-06-19

本文共 2638 字,大约阅读时间需要 8 分钟。

  hot3.png

canvas

英音 /'kænvəs/ 美音 /'kænvəs/ 帆布, 画布


canvas的基本介绍

  • canvas是html5中新增的一个画布标签。这个标签的默认宽高为300*150
    • 设置canvas标签的宽高需要使用表格的形式,widthheight属性
    • 设置canvas标签的宽高不建议使用css样式,因为会将画布拉伸
    • canvas标签中的内容,在支持canvas的浏览器中不会显示出来,而不支持的浏览器中,会将canvas处理为div,所以内容会显示出来
    • .canvas比较通用,在所有支持canvas的浏览器中,canvas的表现(API)都是一致的,不存在兼容性问题
    • canvas只是用来展示图像的东西,画图需要使用画图工具(画图上下文)

canvas的基本使用

  1. 首先要有canvas标签

  2. 获取canvas标签对象

  3. 通过canvas对象获取绘图上下文 2d --> canvas.getContext("2d")

    3d -->"webgl" 相关资料 --> three.js

    • 语法: Canvas.getContext( typeStr ) > 描述: 1. 该方法用于绘制上下文工具. 2. 如果是绘制平面图形使用 '2d' 作为参数, 如果绘制立体图形使用 'webgl'. 3. 使用 '2d' 返回 CanvasRenderingContext2D 类型的对象. 4. 使用 'webgl' 返回 WebGLRenderingContext 类型的对象.
  4. 通过绘图上下文的moveTo方法设置绘图的起始点 ctx.moveTo(x, y)

    • 语法: CanvasRenderingContext2D.moveTo( x, y )

      描述: 1. 该方法用于设置绘制起点. 2.其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

  5. 通过绘图上下文的lineTo方法设置画线的终点 ctx.lineTo(x, y)

    • 语法: CanvasRenderingContext2D.lineTo( x, y )

    描述:

    1. 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
    2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
  6. 通过绘图上下文的stroke方法描线

    ctx.stroke();

    • 语法: CanvasRenderingContext2D.stroke()

      描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.


绘制连续的线段

lineTo方法可以将当前这个点保存,做为下次 lineTo的起始点


绘制曲线

找到x和y的关系,循环遍历所有的x,通过x计算y,画出每一条线段,就能组合出一个曲线

  • 贝塞尔曲线

closePath()方法

closePath可以用来闭合路径,将最后一个lineTo的点和最后一个moveTo的点连接起来


fill()方法

  • 语法: CanvasRenderingContext2D.fill()

  • 描述: 该方法会按照描绘的点的路径来填充图形. 默认是黑色.

用来填充闭合的图形,如果图形没有闭合,会自动闭合


非零环绕原则

在需要判断一个闭合的图形是不是会被填充的时候,从这个闭合的图形中拉出一条直线 判断经过直线的所有线段的方向,如果直线两边相反箭头的数量刚好相同,这个空间就不会被填充,反之则填充

注意:

  1. canvas 中使用各种方法描点实际上描述的是一个称为路径( path )的东西.
  2. canvas绘图中, 所有描述的东西都是路径, 只有最后填充或描边的时候才会显示出效果.
  3. 每一个路径都是一个状态. 非零环绕原则

路径的概念

  1. 路径中包含当前绘图上下文的所有状态,线宽,线的描边样式,填充样式

  2. 一个路径中所有的状态都是一致的,想要更改状态,必须重新开辟路径 --> beginPath


beginPath方法

beginPath方法用来开辟新的路径。
  1. 在使用beginPath开辟新的路径之后,之前的路径状态会被保存,不会重置
  2. 在使用beginPath开辟新的路径之后,起始点会被清除,需要重新手动的moveTo设置起始点

如果要使用新的状态,一定要使用beginPath,否则,会影响之前所有同一路径下的绘图

线型相关的属性

|名称|描述| |--|--| |lineWidth|设置绘图的线条宽度| |lineCap|设置线两端的样式,可选的值有butt(默认)round(圆的)square(方的)| |lineJoin|设置两条线相交的拐点的样式,可选的值有miter(默认尖的) round圆的bevel平的 |strokeStyle|设置线条的颜色(可以使用所有css支持的颜色格式)| |fillStyle|设置填充的颜色(可以使用所有css支持的颜色格式)| |setLineDash|方法,用来设置虚线中空白和实线的宽度,参数为一个数组,数组中的元素,会被循环依次应用到虚线中的每一段线(虚线和实线)上| |getLineDash|方法,用来获取虚线的宽度设置,获取到值是一个数组,如果不是虚线,就是空数组,否则是这个虚线的宽度设置数组| |lineDashOffset|属性,设置虚线的偏移量,如果是正的就向左偏移,如果是负的,就向右偏移|

渐变色

不直接划一整条线,而是用每一个像素拼起来一条直线,每一个像素线段的颜色根据所在位置去计算

var cas = document.getElementById("c1");    var ctx = cas.getContext("2d");    //画一条颜色从黑色渐变到红色直线    //255,0,0   0,0,0    ctx.lineWidth = 100;    for(var i = 0; i <= 255; i++){        ctx.beginPath();        ctx.moveTo(100 + i -1, 100);        ctx.strokeStyle = "rgb("+i+",0,0)";        ctx.lineTo(100 + i, 100);        ctx.stroke();    }

面型对象封装线段

转载于:https://my.oschina.net/mdu/blog/881170

你可能感兴趣的文章
分布式系统唯一ID生成方案汇总【转】
查看>>
并查集hdu1232
查看>>
开发安全的 API 所需要核对的清单
查看>>
Mycat源码中的单例模式
查看>>
WPF Dispatcher介绍
查看>>
Mysql 监视工具
查看>>
【290】Python 函数
查看>>
godaddy域名转发(域名跳转)设置教程
查看>>
silverlight学习布局之:布局stackpanel
查看>>
理解并自定义HttpHandler
查看>>
从前后端分离到GraphQL,携程如何用Node实现?\n
查看>>
JavaScript标准库系列——RegExp对象(三)
查看>>
Linux Namespace系列(09):利用Namespace创建一个简单可用的容器
查看>>
oracle中create table with as和insert into with as语句
查看>>
kafka连接异常
查看>>
11g废弃的Hint - BYPASS_UJVC
查看>>
为什么工业控制系统需要安全防护?
查看>>
Mongodb部署记录[3]-主从搭建
查看>>
hive sql操作
查看>>
tomcat 深度优化
查看>>