zoukankan html css js c++ java

canvas学习笔记1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas>
</body>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色）
                context=canvas.getContext("2d");
        canvas.width=800;
        canvas.height=800;
        context.translate(100,100);//将原点坐标移动到100，100的位置
        drawRect(context,0,0,400,400,10,"#058","red");
        drawRect2(context,100,100,400,400,10,"green","rgba(0,256,0,.5)");
    };
        function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
            cxt.beginPath();
            /*cxt.moveTo(x,y);
            cxt.lineTo(x+width,y);
            cxt.lineTo(x+width,y+height);
            cxt.lineTo(x,y+height);*/
            cxt.rect(x,y,width,height);//rect方法是创建矩形
            //cxt.fillRect(x,y,width,height);//绘制矩形,会通过当前的fillStyle绘制出一个填充的矩形
            //cxt.strokeRect(x,y,width,height);//绘制矩形，会通过当前的strokeStyle绘制出带边框的矩形
            cxt.closePath();
            cxt.lineWidth=borderWidth;
            cxt.fillStyle=fillColor;
            cxt.strokeStyle=borderColor;
            cxt.fill();
            cxt.stroke();
        }
        function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){//绘制矩形
            cxt.lineWidth=borderWidth;
            cxt.fillStyle=fillColor;
            cxt.strokeStyle=borderColor;
            cxt.fillRect(x,y,width,height);
            cxt.strokeRect(x,y,width,height);
        }
</script>
</html>

绘制矩形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto;"></canvas>
</body>
<script>
    var canvas=document.getElementById("canvas"),
        context=canvas.getContext("2d");
    canvas.width=800;
    canvas.height=800;
    context.lineWidth=10;
    context.strokeStyle="#058";

    context.beginPath();
    context.moveTo(100,200);
    context.lineTo(700,200);
    context.lineCap="butt";//lineCap线段末尾的样式，butt为标准型（默认值）   round为突出一段圆形   square为突出一段矩形
    context.stroke();

    context.beginPath();
    context.moveTo(100,400);
    context.lineTo(700,400);
    context.lineCap="round";//lineCap只能用于线段的开始处和结尾处不能用于线段的连接处
    context.stroke();

    context.beginPath();
    context.moveTo(100,600);
    context.lineTo(700,600);
    context.lineCap="square";
    context.stroke();
</script>
</html>

lineCap介绍

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto">当前浏览器不支持canvas</canvas>
</body>
<script>
    window.onload=function() {
        var canvas = document.getElementById("canvas");
        canvas.width = 1024;//画布的宽度
        canvas.height = 768;
        var context = canvas.getContext("2d");
       /* context.lineWidth=10;
        context.lineJoin="miter";//lineJoin默认值是miter表示默认形成一个尖角，bevel斜接的形式，round圆角的形式
        context.miterLimit=20;//只有当lineJoin的值为miter时才有效，也就是尖角的内角和外角的最大距离是10，当超过10时 会按照bevel显示*/
        context.fillStyle="black";
        context.fillRect(0,0,canvas.width,canvas.height);

        for(var i=0;i<200;i++){
            var r=Math.random()*10+10;
            var x=Math.random()*canvas.width;
            var y=Math.random()*canvas.height;
            var a=Math.random()*360;
            drawStar(context,x,y,r,r/2,a);
        }
    };
    //绘制五角星
    function drawStar(cxt,x,y,outR,innerR,rot){//rot为顺时针旋转的角度
        cxt.beginPath();
        for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outR+x,
                            -Math.sin((18+i*72-rot)/180*Math.PI)*outR+y);
            cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,
                            -Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y);
        }
        cxt.closePath();
        cxt.fillStyle="#fb3";
        cxt.strokeStyle="#fd5";
        cxt.lineWidth=3;
        cxt.lineJoin="round";
        cxt.fill();
        cxt.stroke();
    }
</script>
</html>

绘制五角星1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto">当前浏览器不支持canvas</canvas>
</body>
<script>
    window.onload=function() {
        var canvas = document.getElementById("canvas");
        canvas.width = 1024;//画布的宽度
        canvas.height = 768;
        var context = canvas.getContext("2d");
       /* context.lineWidth=10;
        context.lineJoin="miter";//lineJoin默认值是miter表示默认形成一个尖角，bevel斜接的形式，round圆角的形式
        context.miterLimit=20;//只有当lineJoin的值为miter时才有效，也就是尖角的内角和外角的最大距离是10，当超过10时 会按照bevel显示*/
        context.fillStyle="black";
        context.fillRect(0,0,canvas.width,canvas.height);

        for(var i=0;i<200;i++){
            var r=Math.random()*10+10;
            var x=Math.random()*canvas.width;
            var y=Math.random()*canvas.height;
            var a=Math.random()*360;
            drawStar(context,x,y,r,a);
        }
    };
    //绘制五角星
    function drawStar(cxt,x,y,R,rot){//rot为顺时针旋转的角度
        cxt.save();
        cxt.translate(x,y);
        cxt.rotate(rot/180*Math.PI);
        cxt.scale(R,R);
        starPath(cxt);
        cxt.fillStyle="#fb3";
       /* cxt.strokeStyle="#fd5";
        cxt.lineWidth=3;
        cxt.lineJoin="round";*/

        cxt.fill();
       /* cxt.stroke();*/
        cxt.restore();
        /*cxt.fillStyle="#fb3";
        cxt.strokeStyle="#fd5";
        cxt.lineWidth=3;
        cxt.lineJoin="round";
        cxt.fill();
        cxt.stroke();*/
    }
    function starPath(cxt) {
        cxt.beginPath();
        for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
                            -Math.sin((18+i*72)/180*Math.PI));
            cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
                            -Math.sin((54+i*72)/180*Math.PI)*0.5);
        }
        cxt.closePath();
    }
</script>
</html>

绘制五角星2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas>
</body>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色）
                context=canvas.getContext("2d");
        canvas.width=800;
        canvas.height=800;

        context.save();//保存图形的状态
        context.fillStyle="red";
        context.translate(100,100);//将原点坐标移动到100，100的位置
        context.fillRect(0,0,200,200);
        context.restore();//恢复图形的状态，
        context.fillStyle="green";
        context.translate(100,100);//如果前边已经有translate属性，这时translate中的属性值应该累加，translate值其实为200，200，如果代码中存在restore方法，则说明已经恢复的图形的状态，此时translate值为替换，不是累加
        context.fillRect(100,100,200,200);
    };
</script>
</html>

save restore介绍

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas>
</body>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色）
                context=canvas.getContext("2d");
        canvas.width=800;
        canvas.height=800;

        context.save();//保存图形的状态
        context.fillStyle="red";
        context.translate(100,100);//将原点坐标移动到100，100的位置
        context.fillRect(0,0,200,200);
        context.restore();//恢复图形的状态，
        context.fillStyle="green";
        context.translate(100,100);//如果前边已经有translate属性，这时translate中的属性值应该累加，translate值其实为200，200，如果代码中存在restore方法，则说明已经恢复的图形的状态，此时translate值为替换，不是累加
        context.fillRect(100,100,200,200);
    };
</script>
</html>

translate介绍

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas>
</body>
<script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    canvas.width=800;
    canvas.height=800;
  //  transform(a,b,c,d,e,f)    a,d表示水平、垂直缩放。b，c表示水平、垂直倾斜。e，f表示水平、垂直位移
    /*   context.fillStyle="red";
    context.strokeStyle="#058";
    context.save();
    //当页面中有多个transform时，transform值是累加的，不是覆盖的
    context.transform(2,0.2,0.2,1.5,50,100);//表示在水平方向移动50像素 垂直方向移动100像素  水平方向缩放2倍  垂直方向缩放1.5倍  水平和垂直方向都倾斜0.2
    context.transform(1,0,0,1,50,100);
    //setTransform为设置当前的transform值，不管前边设置的transform值为多少 setTransform表示设置当时的transform值为多少
    context.setTransform(1,0,0,1,100,100);
    context.fillRect(50,50,300,300);
    context.strokeRect(50,50,300,300);
    context.restore();*/
    var linearGrad=context.createLinearGradient(0,0,800,800);//线性渐变的起始坐标为0,0   终止坐标为800,800  当渐变位置小于画布的尺寸时，剩下的区域以最后的填充色。如果渐变位置超出画布的尺寸则不显示
    /*linearGrad.addColorStop(0.0,"#fff");//添加渐变色 最小值是0（也就是起点是白色），最大值是1（终点是黑色）
    linearGrad.addColorStop(1.0,"#000");*/
    linearGrad.addColorStop(0.0,"white");
    linearGrad.addColorStop(0.25,"yellow");
    linearGrad.addColorStop(0.5,"green");
    linearGrad.addColorStop(0.75,"blue");
    linearGrad.addColorStop(1.0,"black");
    context.fillStyle=linearGrad;
    context.fillRect(0,0,800,800)
</script>
</html>

线性渐变和 setTransform

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas>
</body>
<script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    canvas.width=800;
    canvas.height=800;
    //  transform(a,b,c,d,e,f)    a,d表示水平、垂直缩放。b，c表示水平、垂直倾斜。e，f表示水平、垂直位移
    /*   context.fillStyle="red";
     context.strokeStyle="#058";
     context.save();
     //当页面中有多个transform时，transform值是累加的，不是覆盖的
     context.transform(2,0.2,0.2,1.5,50,100);//表示在水平方向移动50像素 垂直方向移动100像素  水平方向缩放2倍  垂直方向缩放1.5倍  水平和垂直方向都倾斜0.2
     context.transform(1,0,0,1,50,100);
     //setTransform为设置当前的transform值，不管前边设置的transform值为多少 setTransform表示设置当时的transform值为多少
     context.setTransform(1,0,0,1,100,100);
     context.fillRect(50,50,300,300);
     context.strokeRect(50,50,300,300);
     context.restore();*/
    var radialGrad=context.createRadialGradient(400,400,0,400,400,500);//径向渐变 第一个圆的圆心位置是400,400，半径是0，第二个圆的圆心位置是400,400，半径是500
    radialGrad.addColorStop(0.0,"white");
    radialGrad.addColorStop(0.25,"yellow");
    radialGrad.addColorStop(0.5,"green");
    radialGrad.addColorStop(0.75,"blue");
    radialGrad.addColorStop(1.0,"black");
    context.fillStyle=radialGrad;
    context.fillRect(0,0,800,800)
</script>
</html>

径向渐变

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas>
</body>
<script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    canvas.width=800;
    canvas.height=800;
   /* var backgroundImage=new Image();
    backgroundImage.src="zs_content_bg.jpg";
    backgroundImage.onload=function(){
        var pattern=context.createPattern(backgroundImage,"no-repeat");//创建背景图  createPattern中第一个参数除了可以是图片外  还可以是canvas和video视频
        context.fillStyle=pattern;
        context.fillRect(0,0,800,800)
    };*/
    var backCanvas=createBackgroundCanvas();
    var pattern=context.createPattern(backCanvas,"repeat");
    context.fillStyle=pattern;
    context.fillRect(0,0,800,800);
    function createBackgroundCanvas(){
        var backCanvas=document.createElement("canvas");
        backCanvas.width=100;
        backCanvas.height=100;
        var backCanvasContext=backCanvas.getContext("2d");
        drawStar(backCanvasContext,50,50,50,0);
        return backCanvas;
    }
    function drawStar(cxt,x,y,R,rot){
        cxt.save();
        cxt.translate(x,y);
        cxt.rotate(rot/180*Math.PI);
        cxt.scale(R,R);
        starPath(cxt);
        cxt.fillStyle="#fb3";
        cxt.fill();
    }
    function starPath(cxt){
        cxt.beginPath();
        for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
                        -Math.sin((18+i*72)/180*Math.PI));
            cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
                        -Math.sin((54+i*72)/180*Math.PI)*0.5);
        }
        cxt.closePath();
    }
</script>
</html>

用图片填充canvas

查看全文

相关阅读:
XPOSED优秀模块列表反射
 XPOSED优秀模块列表 ENABLE CALL RECORDING (三星启用通话录音)
sp_Rename批量修改数据表的列名
 我的第一个sql server function
js传递参数时是按照值传递的
 TreeView 绑定到深度未知的数据源
 silverlight中WCF服务定义终结点后可以方便部署
 Jquery常用方法合集，超实用
 sql 触发器 if条件判断
 如何用js判断document里的一个对象是否存在？或是是否有效

原文地址：https://www.cnblogs.com/dongxiaolei/p/6963313.html