专栏首页天天Canvas高级

Canvas高级

1.基本语法
<script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 600;
    can.height =800;
    can.style.border = "1px solid red";
    
    /*cancas是基于状态的绘制的,而不是对某一个线条或者框框设置,是对整个环境的定义*/
    /*意思就是说设置绘图状态是会对整个画布都起作用*/
    /*划线,先设置状态*/
    context.moveTo(100,100);
    context.lineTo(600,600);
    context.lineWidth = 10;
    context.strokeStyle ="#58";

    /*绘制*/
    context.stroke()
    
    
    context.moveTo(100,200);
    context.lineTo(600,600);
    context.lineWidth = 10;
    context.strokeStyle ="red";

    context.stroke()
    
    /*最后画出来的线条都是最后一次绘制是的状态*/
    
    /*需要绘制不同的状态需要*/
    context.beginPath()
    context.moveTo(100,300);
    context.lineTo(600,600);
    context.lineWidth = 20;
    context.strokeStyle ="pink";
    
    context.stroke()
    /*此时绘制的最后一条线就是粉红色的,宽度是20,前两条是红色的,宽度是10*/
    
</script>
2.封闭区域
<script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 800;
    can.height =800;
    can.style.border = "1px solid red";

    /*cancas是基于状态的绘制的*/
    /*一个箭头的绘制*/
    context.beginPath();
    context.moveTo(100,300);
    context.lineTo(400,300);
    context.lineTo(400,200);
    context.lineTo(550,350);
    context.lineTo(400,500);
    context.lineTo(400,400);
    context.lineTo(100,400);
    context.lineWidth = 10;
    context.closePath();
    
    context.fillStyle = "pink";
    context.strokeStyle ="#58";

    
    /*填充和描边的顺序不一样结果也不一样,就是描边的宽度*/
    context.fill();
    context.stroke();

</script>
线条属性
/*
1.lineWidth:线宽;

2.lineCap:线头;

round:圆头
square:方头和butt的区别是到终点往前伸半个线宽 
butt:(deflaut)
   
3.lineJoin:定义线段的拐点样式;

miter(default):尖角(注:当设置miter时,会受到miterLimit限制
    eg:context.lineJoin = "miter";
        context.miterLimit = 10;
    
        drawStar(400,400,300,20,4,"red");/*太尖的时候就受到限制*/)

bevel:顶点是平头
round:拐点是圆头



*/
<script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 600;
    can.height =800;
    can.style.border = "1px solid red";

    /*cancas是基于状态的绘制的*/
    //划线
    context.moveTo(100,100);
    context.lineTo(600,600);
    context.lineWidth = 10;
    
    context.lineCap = "round";
    context.strokeStyle ="#58";

    context.stroke();
    
</script>
矩形
<script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 600;
    can.height =800;
    can.style.border = "1px solid red";

    /*cancas是基于状态的绘制的*/
    //划线
    context.beginPath();
    context.moveTo(100,100);
    context.lineTo(100,600);
    context.lineTo(500,600);
    context.lineTo(500,100);
    context.lineTo(100,100);

    context.lineWidth = 10;
    context.strokeStyle ="#580";

    context.stroke();


    
    /*矩形绘制函数*/
    function drawRect(context,x,y,width,height,linewidth,fillcolor,strokecolor){
        context.beginPath();
        context.moveTo(x,y);
        context.lineTo(x,y+height);
        context.lineTo(x+width,y+height);
        context.lineTo(x+width,y);
        context.closePath();
        context.lineWidth = linewidth;
        context.strokeStyle =strokecolor;
        context.fillStyle =fillcolor;
        
        context.fill();
        context.stroke();
    }

    drawRect(context,200,200,200,200,2,"red","blue")
    
    /*其中颜色可以是css认识的rgb,rgba,hsl,“red”,。。。*/
    
    
    /*canvas提供的矩形绘制的API*/
    context.strokeRect(100,100,200,200);
    context.fillRect(300,300,100,100)

</script>
绘制五角星
<script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 800;
    can.height =800;
    can.style.border = "1px solid red";

    /*cancas是基于状态的绘制的*/
    /*五角星*/

    context.beginPath();
    for(var i = 0;i<5;i++){
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300 +400,
                        -Math.sin((18+i*72)/180*Math.PI)*300+400);
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150 +400,
                -Math.sin((54+i*72)/180*Math.PI)*150+400);

    }
    context.closePath();

    context.lineWidth = 2;
    context.stroke();
    
     //顺时针rot为正
    function drawStar(context,x,y,R,r,rot,linewidth,strokecolor,fillcolor){
        fillcolor = fillcolor || "transparent";
        context.beginPath();
        for(var i = 0;i<5;i++){
            context.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R +x,
                    -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
            context.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r +x,
                    -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);

        }
        context.closePath();

        context.lineWidth = linewidth;
        context.fillStyle = fillcolor;
        context.strokeStyle = strokecolor;

        context.fill();
        context.stroke();
    }


    drawStar(context,400,400,300,150,30,4,"red");

</script>
变换
/*
位移:translate(x,y)

旋转:rotate(deg)

缩放:scale(sx,sy)(缩放会改变边框的粗细)


*/
    context.translate(100,100);
    context.rotate(30/180*Math.PI);
    context.scale(1.5,1);
    context.fillRect(300,300,100,100);
    
    /*利用变换改写五角星函数,实现代码的复用*/
    
    
    <script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 800;
    can.height =800;
    can.style.border = "1px solid red";

    /*cancas是基于状态的绘制的*/
    /*星空*/
    context.fillStyle = "black";
    context.fillRect(0,0,can.width,can.height);

    for(var i =0;i<100;i++){
        var x =Math.random()*can.width;
        var y = Math.random()*can.width*0.5;
        var R = Math.random()*10+10;
        var rot= Math.random()*360;

        drawStar(context,x,y,rot,R);

    }
    
    /*绘制五角星*/
    function drawStar(context,x,y,rot,R){
        context.save();

        context.translate(x,y);
        context.rotate(rot/180*Math.PI);

        starPath(context,R);

        context.lineJoin = "round";
        context.strokeStyle ="#fd5";
        context.fillStyle ="#fb3";

        context.fill();
        context.stroke();

        context.restore()
    }


    /*五角星路径*/
    function starPath(context,R){
        context.beginPath();
        for(var i = 0;i<5;i++){
            context.lineTo(Math.cos((18+i*72)/180*Math.PI)*R ,
                    -Math.sin((18+i*72)/180*Math.PI)*R);
            context.lineTo(Math.cos((54+i*72)/180*Math.PI)*R*0.5 ,
                    -Math.sin((54+i*72)/180*Math.PI)*R*0.5);
        }
        context.closePath();
    }

</script>
transform
<script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 600;
    can.height =800;
    can.style.border = "1px solid red";

    /*cancas是基于状态的绘制的*/
    /*矩阵
    * a c e
    * b d f
    * 0 0 1
    *
    * a,d  水平、垂直缩放
    * b,c 水平、垂直倾斜
    * e f 水平、垂直位移
    * */
    
    context.fillStyle ="#580";

    context.transform(1,30/180*Math.PI,0,1,100,100);
    context.fillRect(0,0,200,200);
    
    
    context.beginPath();
    context.fillStyle ="red";
    /*此处重新设置了变换会改变上次设置的transform设置*/
    context.setTransform(1,0,0,1,200,200);
    context.fillRect(0,0,200,200);

</script>
渐变
/*线性渐变*/
<script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 800;
    can.height =800;
    can.style.border = "1px solid red";
    
    
    /*createLinearGradient()可以传入负值*/
    var linearGrad = context.createLinearGradient(0,0,0,800);
    linearGrad.addColorStop(0,"skyblue");
    linearGrad.addColorStop(0.5,"blue");
    linearGrad.addColorStop(1,"pink");

    context.fillStyle = linearGrad;
    context.fillRect(100,100,600,600);
    
    
    
/*径向渐变*/

/*createRadialGradient(中心圆圆心左边的x值,中心圆圆心左边的y值,中心圆半径大小,外圆圆心左边的x值,外圆圆心左边的y值,外圆半径大小)可以传入负值*/
    var radialGrad  = context.createRadialGradient(400,400,0,400,400,600);
    radialGrad .addColorStop(0,"skyblue");
    radialGrad .addColorStop(0.5,"blue");
    radialGrad .addColorStop(1,"pink");

    context.fillStyle = radialGrad ;

</script>

/*图片纹理*/

<script>
    var can = document.getElementById("can"),
            context = can.getContext("2d");

    can.width = 800;
    can.height =800;
    can.style.border = "1px solid red";
    
    /*context.createPattern(imgSrc,"repeat"),第一个参数可以是图片,也可以是视频,也可以是另一个canvas,,第二个参数可以是repeat,repeat-x...*/
    var imgSrc = new Image();
    imgSrc.src = "img/point.png";

    imgSrc.onload = function(){
        var imgG = context.createPattern(imgSrc,"repeat");
        context.fillStyle = imgG;
        context.fillRect(100,100,600,600);
    }
</script>
圆弧
/*-------------------------------------------*/
    context.strokeStyle = "red" ;
    context.lineWidth = 10;
    context.beginPath();
    /*圆心半径坐标:x,y,半径,起始角度,结束角度,[true/false(表示顺时针还是逆时针)]*/
    context.arc(400,400,200,0,Math.PI);
    context.stroke();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ant-design-mobile设置主题不生效

    在翻阅ant-design-mobile源码里定义的变量,发现那个所谓的主题色不叫@primary-color,而是

    天天_哥
  • Canvas

    天天_哥
  • 框架设计续集(四)

    对于上述的获取元素的方法,其中有缺陷,在于获取元素都是对整个document进行遍历,在性能方面可以优化

    天天_哥
  • Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset

    上面绘画了三条平行线设置了末端样式,下面给三条平行线进行打折,使用lineJoin的方式设置拐点的样式。

    Devops海洋的渔夫
  • CCNP学习笔记3-路由部分--OSPF

                ospf                rip                eigrp

    py3study
  • MySQL 统计信息简介

    MySQL执行SQL会经过SQL解析和查询优化的过程,解析器将SQL分解成数据结构并传递到后续步骤,查询优化器发现执行SQL查询的最佳方案、生成执行计划。查询优...

    wubx
  • MySQL统计信息简介

    MySQL执行SQL会经过SQL解析和查询优化的过程,解析器将SQL分解成数据结构并传递到后续步骤,查询优化器发现执行SQL查询的最佳方案、生成执行计划。查询优...

    wubx
  • 产品指标体系如何搭建

    Hi,我是Froc。今天推荐的这篇文章,作者是我们团队的高级数据分析师,具有丰富的产品分析经验,她所总结的方法,值得大家借鉴。

    用户1756920
  • [ SSH框架 ] Spring框架学习之二(Bean的管理和AOP思想)

    Kevin_Zhang
  • 产品指标体系如何搭建

    做了几个产品的数据工作,对指标体系概念以及规划方法有一定的积累,总结出来作为知识储备。

    腾讯QQ大数据

扫码关注云+社区

领取腾讯云代金券