betway必威-betway必威官方网站
做最好的网站

贝塞尔曲线,translate和rotate的画法探究

过点 (x1,y1), (x0,y0)引射线与点(x1,y1),(x2,y2)所引射线交于点(x1,y1),作其角平分线,找到圆心,使其到角的两边距离等于radius,且切于两侧为p1,p2,即为两切点。

2.创设圆形路线

moveTo & lineTo & beginPath & closePath


  • moveTo(x,y):将画笔移动到x,y坐标(该坐标为第一身形路径的终端);
  • lineTo(x,y):直线连接子路线的顶峰到x,y坐标(只连接,不绘制);
  • beginPath():通过清空子路线列表开首叁个新路线的法子。 当你想创设一个新的门径时,调用此措施;
  • closePath():从当前点到开始点绘制一条直线。 借使图形已经是查封的仍旧唯有贰个点,那么此方法不会做任何操作。

关键:未有子路线时(即未有moveTo或lineTo时),lineTo功效与moveTo一样

先是步:找到切点

  context.strokeRect(x,y,width,height)

Canvas的渐变


渐变经过中的颜色均运用渐变对象.addColorStop(offset,color)艺术设置,多少种颜色渐变就拉长多少次此办法。

  • 线性渐变LinearGradient

该渐变对象只定义渐变的开端与终点地点及渐变的角度,在该两点地方之间完成对应角度的渐变。
潜濡默化的实用限制:在canvas范围内根据两点地方及角度决定了渐变范围。<small>关于渐变色的角度:渐变色位于两点构成直线的垂直线范围内</small>

1. 创建LinearGradient对象
  `var lgradient = ctx.createLinearGradient(xstart,ystart,xend,yend)`
2. 添加渐变颜色`lgradient.addColorStop(offset,color)`<small>多少种颜色渐变就添加多少次此方法</small>
3. 将图形绘制(`ctx.fillRect等`)在渐变对象有效的canvas范围内(非渐变对象的参数范围)

<!--LinearGradient & 角度弧度转化 & 根据角度、圆心、半径获取旋转后的目标坐标 DEMO-->
<body>
    <script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        if (canvas == null) {
            return false;
        }
        var ctx = canvas.getContext("2d");
        // 创建一个线性渐变对象,并指定起始x,y坐标及结束x,y坐标
        var gradient = ctx.createLinearGradient(0, 0, 100, 50);

        // 渐变色添加 begin;真正的渐变为gradient范围内的50%到80%之间,从白色渐变到绿色
        // offset=0.8,表示green的正色在gradient范围的80%处(从左往右);该offset后的范围均为green正色
        gradient.addColorStop(0.8, "green");
        // offset=0.5,表示white的正色在gradient范围的50%处(从左往右);该offset前的范围均为white正色
        gradient.addColorStop(0.5, "white");
        // 渐变色添加 end

        ctx.fillStyle = gradient;
        // 此处300已超出LinearGradient对象的范围及角度产生的渐变范围,故超出有效渐变范围会根据addColorStop设置的偏移和颜色决定,此处显示green色。
        ctx.fillRect(10, 10, 300, 100);

        // 渐变的范围,超出该范围,都使用接近的正色
        ctx.strokeStyle = "#E3C41B";
        ctx.strokeRect(0, 0, 100, 50);

        // 绘制渐变的方向
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(100, 50);
        ctx.stroke();
        // 求斜线的长度,得出半径
        var r = Math.sqrt(Math.pow(100, 2)   Math.pow(50, 2)) / 2;
        ctx.beginPath();
        ctx.moveTo(50, 25);
        var degree = getDegree(0, 0, 100, 50);
        // 注:*****所有的角度都根据当时坐标点上的坐标轴计算,正数则按顺时针计算*****
        // 1角度=π/180弧度
        //dx 应该是顺时针偏移斜线与x坐标轴的顺时针夹角 90度角算出的x轴坐标
        var dx = 50   Math.cos(degree * (Math.PI / 180)   Math.PI / 2) * r;
        var dy = 25   Math.sin(degree * (Math.PI / 180)   Math.PI / 2) * r;
        ctx.lineTo(dx, dy);
        ctx.strokeStyle = "#f00";
        ctx.stroke();

        // 弧度的辅助线
        ctx.beginPath();
        ctx.moveTo(75, 25);
        var cpx1 = cpx2 = 100 - 35;
        var cpy1 = cpy2 = dy - 30;
        ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, dx   (50 - dx) / 2, (dy - 25) / 2   25);
        ctx.stroke();
        ctx.strokeStyle = "#000";
        ctx.strokeText("dx,dy参数中的弧度", cpx1, cpy1);

        // 中心点坐标轴
        ctx.beginPath();
        ctx.moveTo(0, 25);
        ctx.lineTo(100, 25);
        ctx.strokeText("x轴", 100, 25);
        ctx.moveTo(100 * 0.5, 0);
        ctx.lineTo(100 * 0.5, 100);
        ctx.strokeText("y轴 offset:0.5", 100 * 0.5, 100);
        // 0.8offset的垂直线
        ctx.moveTo(100 * 0.8, 0);
        ctx.lineTo(100 * 0.8, 80);
        ctx.strokeText("offset:0.8", 100 * 0.8, 80);
        ctx.strokeStyle = "#00a";
        ctx.stroke();

        // 注释
        ctx.strokeText("黄色斜线位置与方向:", 10, 150);
        ctx.strokeText("offset就是颜色正色在该斜线x轴上的偏移量;", 10, 170);
        ctx.strokeText("图中所示offset与黄色斜线相交点:0.8与0.5两个点;", 10, 190);
        ctx.strokeText("两色之间做渐变,根据斜线方向及整个屏幕范围渐变;", 10, 210);
        ctx.strokeText("将图形的style设置为渐变对象,并在渐变屏幕范围", 10, 230);
        ctx.strokeText("内绘制即可得到渐变效果", 10, 250);
    }

    //获取两点之间的直线与起始点坐标x轴顺时针的角度
    function getDegree(sx, sy, dx, dy) {
        // 直角的边长
        var x = Math.abs(sx - dx);
        var y = Math.abs(sy - dy);
        // 根据勾股定理 斜边的平方 = 两直角边的平方之和
        var z = Math.sqrt(Math.pow(x, 2)   Math.pow(y, 2));
        // cos
        var cos = x / z;
        // 获取弧度
        var angle = Math.acos(cos);
        // 转化为角度;1弧度 = 180/π角度
        var degree = 180 / Math.PI * angle;
        console.log(degree);
        return degree;
    }
    </script>
    <canvas id="canvas" height="500" width="500"></canvas>

以上代码效果图如下所示:

图片 1

LinearGradient示例图(二色渐变)

  • 径向渐变RadialGradient

该渐变对象实现射线式径向渐变,其卓有成效限制为:通过起先圆形两侧射线到结束圆形两侧并相汇处

1. 创建RadialGradient对象
  `var lgradient = ctx.createRadialGradient(xstart,ystart,rstart,xend,yend,rend)`
2. 添加渐变颜色`lgradient.addColorStop(offset,color)`<small>多少种颜色渐变就添加多少次此方法</small>
3. 将图形绘制(`ctx.fillRect等`)在渐变对象有效范围内(非渐变对象的参数范围)

<!-- RadialGradient Demo-->
<body>
    <script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        if (canvas == null) {
            return false;
        }
        var ctx = canvas.getContext("2d");
        // 创建射线(径向)渐变对象,六个参数分别是:起始圆形坐标x,y,半径,结束圆形坐标x,y,半径;
        // 通过起始圆形两边射线到结束圆形两边并相汇是结束
        var radiaGradient = ctx.createRadialGradient(50, 50, 50, 200, 200, 400);
        // 设置三个渐变颜色
        radiaGradient.addColorStop(0.3, "#ff0");
        radiaGradient.addColorStop(0.8, "rgb(255,140,0");
        radiaGradient.addColorStop(1, "rgb(255,0,0");
        // 设置填充颜色为渐变对象
        ctx.fillStyle = radiaGradient;
        // 绘制一个矩形
        ctx.fillRect(0, 0, 500, 500);

    }
    </script>
    <canvas id="canvas" height="500" width="500"></canvas>

上述代码效果图如下:

图片 2

径向渐变示例图(三色渐变)

(以上是经过不停改变rotate的角度,在同一坐标填充字体的结果。)

而外,还可能有使用bezierCurveTo绘制曲线(有意思味能够本人去商讨,本身太菜,加上呼吸系统感染觉用不上这么高大上的事物,就不做速记了)
四、绘制渐变图形

代码示例:
<body>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        if (canvas == null) {
            return false;
        }
        var context = canvas.getContext("2d");
        //创建路径
        context.beginPath();
        //移动画笔 1.将画笔移动到50,50的坐标
        context.moveTo(50, 50);
        //画第一条线 2.从moveTo的50,50到lineTo的400,50坐标划一条线
        context.lineTo(100, 50);
        //画第二条线 3.从上一个lineTo的400,50到这个lineTo的50,400坐标划一条线
        context.lineTo(50, 100);
        //从当前点(50,400)到起始点(beginPath后moveTo的50,50)划一条线
        context.closePath();
        //画笔颜色
        context.strokeStyle = "#ccc";
        //线的宽度
        context.lineWidth = "5";
        //渲染,即开始绘画
        context.stroke();
        /*该例子中closePath()相当于lineto(50,50);故这条线是50,50到100,100两点的直线*/
        context.lineTo(100, 100);
        context.stroke();

        /*清空路径列表,重新创建一个新的路径*/
        context.beginPath();
        /*当前不存在子路径,故此方法作用与moveTo(200,200)相同*/
        context.lineTo(200, 200);
        /*将200,200这个子路径终点连接到250,250*/
        context.lineTo(250, 250);
        /*将连接的直线绘制出来*/
        context.stroke();
    }
</script>
<canvas id="canvas" height="300" width="500" style="background-color: #ff0;"></canvas>
</body>

图片 3

上述代码示例效果图

) ; 还要加上moveTo的点(x0,y0) ; 第一步:找到切点 过点 (x1,y1), (x0,y0)引射线与点(x1,y1),(x2,y2)所引射线交于点(x1,y1),作其角平...

使用图形上下文对象的transform方法修改调换矩阵,如:context.transform(m11,m12,m21,m22,dx,dy);那当中的m11,m12,m21,m22多个参数涉及到矩阵乘法的,这里然而多介绍(实际上是大半都丢给教授了)

制图贝塞尔曲线 <small>bezierCurve API参考</small>


  • 参数
    • cp1x:第叁个调整点的 x 轴坐标;
    • cp1y:第叁个调节点的 y 轴坐标;
    • cp2x:第二个调节点的 x 轴坐标;
    • cp2y:第贰个调节点的 y 轴坐标;
    • x:截至点的 x 轴坐标;
    • y:停止点的 y 轴坐标。
  • 重点:绘制beziercurve器重在于领会cp1和cp2五个点的操纵;曲线的起源为画笔的起源,曲线的极端为参数x,y的坐标,曲线的屈曲度由cp1和cp2七个点地点的牵重力决定。
<body>
    <!-- beziercurve demo -->
    <script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        if (canvas == null) {
            return false;
        }
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "#ddd";
        ctx.lineWidth = 1;

        //画横线,y轴每隔10个像素画一条横线
        for (var i = 0.5; i < 500; i  ) {
            //创建路径,如果没有此方法,循环会导致里面的线会重复渲染。可比较"画横线"与"画竖线"的区别。
            //ctx.beginPath();
            ctx.moveTo(0, i * 10);
            ctx.lineTo(500, i * 10);
            //若该渲染方法写在for循环之外,即使没有beginPath()方法,也不会重复渲染。
            ctx.stroke();
        }

        //画竖线,x轴每隔10个像素画一条竖线
        for (var i = 0.5; i < 500; i  ) {
            ctx.beginPath();
            ctx.moveTo(i * 10, 0);
            ctx.lineTo(i * 10, 500);
            ctx.stroke();
        }
        // beziercurve begin
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.bezierCurveTo(100, 400, 400, 400, 400, 100);
        //如果图形已经是封闭的或者只有一个点,那么此方法不会做任何操作。否则该方法会尝试从当前点到起始点绘制一条直线。
        // ctx.closePath();
        ctx.strokeStyle = "#f00";
        ctx.stroke();
        // beziercurve end

        /*下方代码更好的说明bezierCurverTo六个参数的作用*/

        //第一个控制点,曲线的牵引方向点;bezierCurveTo第一个x,y
        drawArc(ctx, 100, 400, 5, 0, 2 * Math.PI, "#f00", "控制点1");
        //第二个控制点,曲线的牵引方向点;bezierCurveTo第二个x,y
        drawArc(ctx, 400, 400, 5, 0, 2 * Math.PI, "#f00", "控制点2");
        //开始点,moveTo的点
        drawArc(ctx, 100, 100, 5, 0, 2 * Math.PI, "#00f", "起始点");
        //结束点,相当于lineTo的点;bezierCurveTo第三个x,y
        drawArc(ctx, 400, 100, 5, 0, 2 * Math.PI, "#00f", "结束点");

    }

    // 绘制一个圆点及旁注
    function drawArc(ctx, x, y, r, startAngle, endAngle, color, txt) {
        ctx.beginPath();
        ctx.arc(x, y, r, startAngle, endAngle);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.strokeStyle = color;
        // 绘制字符
        ctx.strokeText(txt, x   r   5, y);
    }
    </script>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

意义图如下:

图片 4

贝塞尔曲线示例图

还要加上moveTo的点(x0,y0) ;

三、moveTo与lineTo

Canvas的缩放、平移、旋转与ctx的情状保存及回复


  • 缩放:scale(x,y):x,y为缩放因子,会影响缩放对象的装有参数(如宽高、坐标、偏移量,但不影响角度);
  • 平移:translate(x,y):x,y为坐标轴的偏移量,即x表示指标x轴与当下x轴的偏离,y表示指标y轴与近来y轴的相距;
  • 旋转:rotate(angle):旋转的弧度;angle = degree * (Math.PI / 180) ;degree为角度。旋转后,ctx的原坐标轴也会随着旋转,旋转后的ctx状态会导致早先时期绘制的图形其坐标轴也是依靠旋转后的坐标轴绘制的;

留意多个艺术前后相继的调换所发出的震慑。
1.translate、rotate、scale效能的是全体ctx
2.rotate的团团转的是ctx景况,是基于ctx的近年来坐标轴x轴实行的,正弧度表示顺时针,反之逆时针;旋转后开始坐标轴更新到旋转后的坐标轴状态
3.translate的参数为距x轴的离开,距y轴的离开;即发轫点x,y的偏移量;同样是依靠ctx的眼下状态坐标轴进行
translate、rotate、scale会被ctx记录状态,值会被叠合

  • ctx.save():将最近上下文状态保存,以便中期使用;以便某景况被遮住的时候利用;
  • ctx.restore():还原至近些日子save的上下文状态。
<!--scale translate rotate & save restore demo-->
<body>
    <script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        if (canvas == null) {
            return false;
        }
        var ctx = canvas.getContext("2d");

        ctx.strokeStyle = "#ddd";
        ctx.lineWidth = 1;

        //画横线,y轴每隔10个像素画一条横线
        for (var i = 0.5; i < 500; i  ) {
            //创建路径,如果没有此方法,循环会导致里面的线会重复渲染。可比较"画横线"与"画竖线"的区别。
            //ctx.beginPath();
            ctx.moveTo(0, i * 10);
            ctx.lineTo(500, i * 10);
            //若该渲染方法写在for循环之外,即使没有beginPath()方法,也不会重复渲染。
            ctx.stroke();
        }

        //画竖线,x轴每隔10个像素画一条竖线
        for (var i = 0.5; i < 500; i  ) {
            ctx.beginPath();
            ctx.moveTo(i * 10, 0);
            ctx.lineTo(i * 10, 500);
            ctx.stroke();
        }

        ctx.fillStyle = "#ff0";
        ctx.fillRect(50, 50, 50, 100);
        // 保存当前状态
        ctx.save();
        ctx.translate(50, 50);
        ctx.fillStyle = "#0f0";
        ctx.fillRect(50, 50, 50, 100);
        // 使用restore后,最近的save状态就会被弹出;
        ctx.restore();
        // 重新保存还原后得到的第一个save状态
        ctx.save();
        for (var i = 0; i < 3; i  ) {
            // ctx.scale(0.9, 0.9);
            // x,y分别正向偏移各50像素
            ctx.translate(50, 50);
            ctx.fillStyle = "rgba(255,0,0,0.25)";
            // 以偏移后的50,50坐标点做为起始的0,0坐标点,下方的50,50坐标点以原始0,0计算则为100,100的坐标.
            ctx.fillRect(50, 50, 100, 20);
        }
        // 恢复到save保存的状态
        ctx.restore();
        ctx.translate(300, 300);
        // ctx会记录绘制的状态,循环会导致在记录的状态下不断的scale,不断的translate。
        for (var i = 0; i < 50; i  ) {
            // 先缩放,后平移,会导致平移的50,50偏移量随缩放因子改变,及x,y实际偏移量分别为45,45。
            // 即使先平移,后缩放,因循环也会导致平移的参数随缩放因子发生变化。
            // 说明ctx的状态被实时覆盖保存,除非通过save()存档副本
            ctx.scale(0.9, 0.9);
            ctx.translate(10, 10);
            // 顺时针30度角旋转
            ctx.rotate(30 * Math.PI / 180);
            ctx.fillStyle = "rgba(0,0,255,0.25)";
            // scale的缩放因子为0.9,所以实际坐标为偏移后的x坐标 45,偏移后的y坐标 0;宽高为90,18。
            ctx.fillRect(50, 0, 100, 20);
        }
    }
    </script>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

如上代码效果图如下:

图片 5

缩放、平移、旋转及气象保存还原的演示

/* translate rotate 重要知识点 */
/* 重点:
 * 1.translate、rotate、scale作用的是整个ctx
 * 2.rotate的旋转的是ctx环境,是根据ctx的当前坐标轴x轴进行的,正弧度表示顺时针,反之逆时针;旋转后起始坐标轴更新到旋转后的坐标轴状态
 * 3.translate的参数为距x轴的距离,距y轴的距离;即起始点x,y的偏移量;同样是根据ctx的当前状态坐标轴进行
 * translate、rotate、scale会被ctx记录状态,值会被叠加
 * */
var secCanvas = document.getElementById("secCanvas");
secCanvas.style.backgroundColor = "#ccc";
ctx = secCanvas.getContext("2d");
for(var i = 0; i < 2; i  ) {
    ctx.beginPath();
    //标识ctx的起始点 beigin (蓝色原点)
    ctx.arc(0, 0, 5, 0, 2 * Math.PI, false);
    ctx.fill();
    //标识ctx的起始点 end
    ctx.fillStyle = "royalblue";
    //scale不影响角度,只影响宽高、坐标、偏移量
    //ctx.scale(0.9,0.9);
    var angle = 45 * (Math.PI / 180);
    //基于起点坐标轴x轴顺时针旋转45度角
    //rotate后,ctx的整个坐标轴就旋转了45度角(图中的红线为旋转后的x轴)
    ctx.rotate(angle);/*因为ctx会更新状态,所以会作用到第二次循环*/
    ctx.save(); /*保存旋转后的状态,以便下方划坐标轴用*/

    //划旋转angle弧度后的线条 beigin
    ctx.beginPath();
    ctx.moveTo(0, 0);
    //ctx已经旋转,这里获取旋转角度后对应100半径的坐标点,角度只需0即可
    var dx = Math.cos(0) * 500;
    var dy = Math.sin(0) * 500;
    ctx.lineTo(dx, dy);
    ctx.strokeStyle = "#FF0000";
    ctx.stroke();
    ctx.font = "14px Consolas";
    ctx.strokeStyle = "#228B22";
    ctx.strokeText("第" (i 1) "个循环旋转45度后的x坐标轴", dx, dy)
        //划旋转angle弧度后的线条 end

    //标识未translate(50,0)前的rect起始点(红色点)
    ctx.strokeText("第" (i 1) "个循环旋转45度后的100,0坐标点", 100, 0)
    ctx.beginPath();
    ctx.arc(100, 0, 5, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    //基于起点坐标轴x,y轴的偏移距离
    ctx.translate(50, 0);
    ctx.fillRect(100, 0, 100, 50);

    //标识translate(50,0)后的rect起始点(黄色点)
    ctx.strokeText("第" (i 1) "个循环旋转45度且偏移50,0后的100,0坐标点", 100, 20)
    ctx.beginPath();
    ctx.arc(100, 0, 5, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#ff0";
    ctx.fill();

    //旋转45度后的坐标轴
    ctx.restore(); /*还原到未translate前*/
    ctx.beginPath();
    //划第一个100,0坐标点的y轴
    //移动到第一个100,0坐标点(红色)
    ctx.moveTo(100, -100);
    ctx.lineTo(100, 100);
    ctx.stroke();
    ctx.font = "14px Arial";
    ctx.strokeText("第" (i 1) "个循环旋转45度后的y坐标轴", 110, -100);

    //划第二个100,0坐标点的y轴
    ctx.beginPath();
    //基于第一个100,0坐标点,x轴方向偏移50
    ctx.translate(50, 0)/*将作用于第二次循环的ctx起始点*/
        //实际moveTo(150,-100)
    ctx.moveTo(100, -100);
    ctx.lineTo(100, 100);
    ctx.stroke();
}

图片 6

循环2次的职能图

rotate是旋转坐标轴,自然也是基于坐标原点的!故不用translate更改原点的话,rotate就是相对于(0,0)的转动。合作translate,则会相对于新的坐标原点旋转。那个必要留心。对八个图形,做为主旋转,无疑是较好的选拔。

故此,在成立路径时,供给采用moveTo方法将光标移动到钦命的直线源点,然后利用lineTo方法在直线起源和直线终点之间成立路线,然后将光标移动到直线终点,在下一回利用lineTo方法的时候,会以近来光标所在坐标点为直线起源,并在下三遍用lineTo方法内定的直线终点之间创设路线,它会不断重复这几个进度,来成功复杂图形的路径绘制.

Canvas图形绘制 <small>API参考</small>


  • 发端成立路线ctx.beginPath(),通过此办法幸免前边的图片重复绘制。
  • (以圆形为例)创设圆形路径ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
    <small>
    • x:圆心X坐标;
    • y:圆心Y坐标;
    • radius:圆半径;
    • startAngle:开首弧度,一般为0;依据意况而定;
    • endAngle:甘休弧度,2 * Math.PI 表示360°;
    • anticlockwise:可选值;默感觉false,即顺时针绘制;假使为 true,逆时针绘制圆弧。
      </small>
  • 关渠道径ctx.closePath():将笔点再次来到到当前子路径初叶点的主意;它尝试从当下点到开端点绘制一条直线。 假如图形已经是查封的依旧独有贰个点,那么此办法不会做任何操作。

<small>若不需求密封非整圆,请勿使用该措施;不然会在非整圆终点至初阶点绘制一条直线。</small>

  • 安装画笔绘制样式<small>(填充ctx.fillStyle;划线ctx.strokeStyle,线宽ctx.lineWidth。)</small>
  • 始于绘制图形<small>(填充ctx.fill(),划线ctx.stroke())</small>
<!--canvas arc demo-->
    <script>
    "use strict"
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        if (canvas == null) {
            return false;
        }
        // 获得一个2d渲染上下文
        var ctx = canvas.getContext("2d");
        for (var i = 1; i < 10; i  ) {
            // 创建路径;如果不重新创建路径,存在的图形路径会重复绘制
            ctx.beginPath();
            //创建图形路径; 
            ctx.arc(50 * i, 50 * i, 20 * i, 0, 2 * Math.PI, true);
            //闭合路径;
            ctx.closePath();
            //设置填充颜色
            ctx.fillStyle = "rgba(255,0,0,0.25)";
            //开始填充图形
            ctx.fill();
            // 划笔样式
            ctx.strokeStyle = "#ff0";
            // 划线渲染
            ctx.stroke();
        }
    }
    </script>
    <canvas id="canvas" width="1000" height="1000"></canvas>
</body>

小结一下,正是:tanslate和rotate都以对针对canvas坐标轴的调换。调换后的坐标都以基于新的坐标体系的。二者匹配对于部分旋转绘制会一定有益(省去了总计复杂坐标的标题)

2.绘制径向渐变

arcTo(x1,y1,x2,y2,radius) ;

此间,能够来看一下渐变,首先是最简单易行的两点之间的线性渐变.

canvas私下认可原点为(0,0),即左上角点。通过translate能够改造原点,如translate(100,200),就是将原点改为相对于左上角的(100,200)点。canvas正是一张纸,在上面画图,点、线都以基于八个坐标轴的,translate正是改动了坐标轴原点,就是对坐标轴的转移。

代码示例:

图片 7

  context.fillRect(x,y,width,height)

从起源(x0,y0)引线段到切点p1(p1在点(x1,y1)、(x0,y0)所成的射线上),然后切点p1引以radius为半径的圆弧线到切点p2,终止。

  使用图形上下文对象的translate方法移动坐标轴原点,如context.translate(x,y); ----x表示将坐标轴原点向右移动几个单位,默许意况下为像素,y表示将坐标轴原点向下移动多少单位.



  strokeStyle--图形边框的体裁,在该属性中填入边框的颜色值

图片 8

制图直线时,一般会用到moveTo和lineTo三种格局,功用如下:

第二步:画线

平移:

即最后的线条,肯定起于(x0,y0)点,终于切点p2,过切点p1,肯定不过(x1,y1),大概过(x2,y2)(仅当其刚好是切点的时候)。

该措施应用多个参数,x为绘制圆形的圆点横坐标,y为绘制圆形的圆点纵坐标,radius为圆形半径,strartAngle为始发角度,endAngle为了却角度,anticlockwise为是还是不是比照顺时针方向实行绘图

moveTo

设定渐变颜色的不二法门则与线性渐变同样

4.设定绘图样式: 在打开图片绘制的时候,首先要设定好绘图的样式(style),然后调用有关措施实行图片的绘制.所谓绘图的体裁,重若是对准图形的颜色来讲的,但是并不压制图形的颜色.

旋转:

function draw (obj) {
    var $myCanvas = document.getElementById(obj);
    if ($myCanvas == null) return false;
    var $ctx = $myCanvas.getContext('2d');
    $ctx.fillStyle = 'rgba(0,0,0,0.3)';
    $ctx.fillRect(0,0,400,300);
    $ctx.strokeStyle = 'rgb(0,0,0)';
    $ctx.lineWidth = 1;
    $ctx.strokeRect(0,0,400,300);

    $ctx.beginPath();
    $ctx.arc(0,0,150,0,2*Math.PI,true);
    $ctx.closePath();
    $ctx.fillStyle = 'rgba(255,0,0,0.5)';
    $ctx.fill();
}

由此该形式,创造了叁个选用几个坐标点的LinearGradient对象,而渐变的颜色则利用addColorStop方法开始展览设定,该办法的如:context.addColorStop(offset,color);

接下去还会有矩阵转换,当中第一涉及到转换矩阵,这一个矩阵是专程用来促成图形变形的,它与坐标系一齐同盟使用,以完成变形的目标,当图形上下文被创立完成时,事实上也开创了五个暗许的调换矩阵,假设不对这一个调换矩阵张开退换,那么接下去绘制的图形将以画布的最左上角为坐标原点绘制图形,绘制出来的图样也不通过缩放、变形的拍卖,倘诺对这几个调换矩阵展开退换,那么情状则一心不等同了.

3.填充与绘图边框: 用canvas绘制图形的时候,有两种格局--填充(fill)与绘图边框(stroke).填充是指填满图形内部,绘制边框是指不填满图形内部,只绘制图形的外框.

如:context.fillStyle = 'rgba(255,0,0,0.25)';   context.fill();

  lineTo方法在moveTo方法中钦命的直线源点与参数中钦定的直线终点之间绘制一条直线,如lineTo(x,y),使用情势和moveTo(x,y)的措施一样,使用该措施之后,光标自动移动到lineTo方法的参数所内定的直线终点

二、使用路线

本文由betway必威发布于网页设计,转载请注明出处:贝塞尔曲线,translate和rotate的画法探究

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。