canvas-1描线&矩形

最新推荐文章于 2024-04-08 20:58:26 发布

weixin_33754065

最新推荐文章于 2024-04-08 20:58:26 发布

阅读量109

点赞数

原文链接：https://my.oschina.net/mdu/blog/881170

版权

为什么80%的码农都做不了架构师？>>>

canvas

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

canvas的基本介绍

canvas是html5中新增的一个画布标签。这个标签的默认宽高为300*150

- 设置canvas标签的宽高需要使用表格的形式，width和height属性
- 设置canvas标签的宽高不建议使用css样式，因为会将画布拉伸
- canvas标签中的内容，在支持canvas的浏览器中不会显示出来，而不支持的浏览器中，会将canvas处理为div，所以内容会显示出来
- .canvas比较通用，在所有支持canvas的浏览器中，canvas的表现（API）都是一致的，不存在兼容性问题
- canvas只是用来展示图像的东西，画图需要使用画图工具（画图上下文）

canvas的基本使用

首先要有canvas标签
获取canvas标签对象
通过canvas对象获取绘图上下文 2d --> canvas.getContext("2d")
3d -->"webgl" 相关资料 --> three.js
- 语法: Canvas.getContext( typeStr ) > 描述: 1. 该方法用于绘制上下文工具. 2. 如果是绘制平面图形使用 '2d' 作为参数, 如果绘制立体图形使用 'webgl'. 3. 使用 '2d' 返回 CanvasRenderingContext2D 类型的对象. 4. 使用 'webgl' 返回 WebGLRenderingContext 类型的对象.
通过绘图上下文的moveTo方法设置绘图的起始点 ctx.moveTo(x, y)
- 语法: CanvasRenderingContext2D.moveTo( x, y )
  
  描述: 1. 该方法用于设置绘制起点. 2.其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
通过绘图上下文的lineTo方法设置画线的终点 ctx.lineTo(x, y)
- 语法: CanvasRenderingContext2D.lineTo( x, y )
描述:
1. 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
通过绘图上下文的stroke方法描线
ctx.stroke();
- 语法: CanvasRenderingContext2D.stroke()
  
  描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.

绘制连续的线段

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

绘制曲线

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

贝塞尔曲线

`closePath()`方法

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

fill()方法

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

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

非零环绕原则

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

注意：

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

路径的概念

路径中包含当前绘图上下文的所有状态，线宽，线的描边样式，填充样式
一个路径中所有的状态都是一致的，想要更改状态，必须重新开辟路径 --> beginPath

`beginPath`方法

`beginPath`方法用来开辟新的路径。

在使用beginPath开辟新的路径之后，之前的路径状态会被保存，不会重置
在使用beginPath开辟新的路径之后，起始点会被清除，需要重新手动的moveTo设置起始点

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

线型相关的属性

渐变色

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

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();
    }

面型对象封装线段

<body>
<canvas width="600" height="400" id="c1"></canvas>

<script>
    var cas = document.getElementById("c1");
    var ctx = cas.getContext("2d");




//    function strokeLine(x, y, x1, y1){
//        ctx.beginPath();
//        ctx.moveTo(x, y);
//        ctx.lineTo(x1, y1);
//        ctx.stroke();
//    }
//
//    strokeLine(100, 100, 400, 100);
//    strokeLine(100, 200, 400, 200);


    function Line(option){
        this.beginX = option.x;
        this.beginY = option.y;
        this.endX = option.x1;
        this.endY = option.y1;
        this.ctx = option.ctx;
        this.strokeStyle = option.strokeStyle;
        this.init();
    }

    Line.prototype = {
        constructor: Line,
        init:function() {
            this.ctx.beginPath();
            this.ctx.moveTo(this.beginX, this.beginY);
            this.ctx.lineTo(this.endX, this.endY);
            this.ctx.strokeStyle = this.strokeStyle;
        },
        draw:function () {
            this.ctx.stroke();
        }
    }

    var line = new Line({
        x:100,
        y:100,
        x1:400,
        y1:100,
        strokeStyle:"pink",
        ctx:ctx
    });

    line.draw();

</script>
</body>

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