canvas入门系列

最新推荐文章于 2024-08-05 16:35:45 发布
最新推荐文章于 2024-08-05 16:35:45 发布
阅读量2.2k 收藏 13
点赞数 6
分类专栏： HTML5 文章标签： canvas H5绘图技术 HTML5 canvas动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyphf/article/details/52082043
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{ background:#000;}
    #c1{ background:#fff;}
</style>
</head>
<body>
    <canvas id="c1" width="800" height="600"><span style="color:red;">您的浏览器不支持此标签！ 请更换浏览器！</span></canvas>
</body>
</html>

canvas绘图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{ background:#000;}
    #c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');

    //获取绘图接口
    var gd = oC.getContext("2d");

    gd.moveTo(140,46);
    gd.lineTo(271,130);
    gd.lineTo(187,223);
    gd.lineTo(123,169);
    gd.lineTo(140,46);
    //绘制的路径

    gd.lineWidth = "10";//设置或返回当前线条的宽度,以像素计。 不需要单位
    gd.strokeStyle = "green";//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
    gd.fillStyle = "red";
    gd.fill();

    //绘制
    gd.stroke();
}
</script>
</head>
<body>
<canvas id="c1" width="800" height="600"><span style="color:red;">您的浏览器不支持此标签！ 请更换浏览器！</span></canvas>  
</body>
</html>

canvas——注意事项一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{ background:#000;}
    #c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var gd = oC.getContext("2d");

    //最后有开始 和结束 begin/closePath

    gd.beginPath();//开始绘制路径
    gd.moveTo(140,46);
    gd.lineTo(271,130);
    gd.lineTo(187,223);
    gd.lineTo(123,169);
    gd.lineTo(140,46);
    gd.closePath();//结束路径

    gd.lineWidth = "10";
    gd.strokeStyle = "green";
    gd.fillStyle = "red";
    gd.fill();//填充

    gd.stroke();//绘制     
};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

canvas——注意事项二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{ background:#000;}
    #c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var gd = oC.getContext("2d");

    //最后有开始 和结束 begin/closePath

    gd.beginPath();//开始绘制路径
    gd.moveTo(140,46);
    gd.lineTo(271,130);
    gd.lineTo(187,223);
    gd.lineTo(123,169);
    //gd.lineTo(140,46);

    gd.closePath();//结束路径—— 自动闭合路径

    gd.lineWidth = "10";
    gd.strokeStyle = "green";
    gd.fillStyle = "red";

    gd.fill();//填充
    gd.stroke();//绘制
};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

canvas——注意事项三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{ background:#000;}
#c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var gd = oC.getContext("2d");

    //最后有开始 和结束 begin/closePath

    gd.beginPath();//开始绘制路径
    gd.moveTo(140,46);
    gd.lineTo(271,130);
    gd.lineTo(187,223);
    gd.lineTo(123,169);
    //gd.lineTo(140,46);

    gd.closePath();//结束路径—— 自动闭合路径

    gd.lineWidth = "30";//内外扩充
    gd.strokeStyle = "green";
    gd.fillStyle = "red";

    gd.stroke();//绘制

    gd.fill();//填充  —— 有顺序 后面会覆盖前面的
};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

canvas——注意事项四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{ background:#000;}
    #c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var gd = oC.getContext("2d");

    gd.beginPath();
    gd.moveTo(100,100);
    gd.lineTo(100,300);
    gd.strokeStyle = "red"; 
    gd.lineWidth = "10";
    gd.closePath();
    gd.stroke();

    gd.beginPath();// 重新开始绘制一条路径
    gd.moveTo(300,100);
    gd.lineTo(300,300);
    gd.closePath();
    gd.strokeStyle = "green"; 
    gd.lineWidth = "20";
    gd.stroke();
};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>  
</body>
</html>

canvas——注意事项五

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{ background:#000;}
#c1{ background:#fff;/*width:800px; height:600px;*/}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");
    oC.width = "800";
    oC.height = "600";

    var gd = oC.getContext("2d");
    gd.beginPath();//开始绘制路径
    gd.moveTo(140,46);
    gd.lineTo(271,130);
    gd.lineTo(187,223);
    gd.lineTo(123,169);
    gd.lineTo(140,46);
    gd.closePath();//结束路径
    gd.stroke();

};
</script>
</head>
<body>
    <canvas id="c1"></canvas>
</body>
</html>

canvas简易绘图板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{ background:#000; text-align:center;}
#c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");
    var gd = oC.getContext("2d");

    oC.onmousedown = function(ev){
        var x = ev.clientX - oC.offsetLeft;
        var y = ev.clientY - oC.offsetTop;
        gd.beginPath();
        gd.moveTo(x,y);

        document.onmousemove = function(ev){
            var x = ev.clientX - oC.offsetLeft;
            var y = ev.clientY - oC.offsetTop;
            gd.lineTo(x,y);
            //gd.closePath();
            gd.stroke();    
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;   
    };

};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

canvas柱形图报表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{ background:#000; text-align:center;}
    #c1{ background:#fff;padding:10px;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");
    var gd = oC.getContext("2d");

    var arr = [100,200,150,220,300,180,240];

    //定义初始值
    var space = oC.width/(arr.length*4 - 1);
    var w = 3*space;

    //最大值
    var iMax = Math.max(...arr);

    //每个柱子的高度
    var arrH = [];
    for(var i = 0; i < arr.length; i++){
        arrH.push(arr[i]/iMax*oC.height);
    }

    //绘制矩形
    for(var i = 0; i < arrH.length; i++){

        var r = parseInt(Math.random()*256);
        var g = parseInt(Math.random()*256);
        var b = parseInt(Math.random()*256);

        gd.fillStyle = "rgb("+r+","+g+","+b+")";
        gd.fillRect((space+w)*i,oC.height-arrH[i],w,arrH[i]);
        gd.strokeRect((space+w)*i,oC.height-arrH[i],w,arrH[i]);
    }

};
</script>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

用canvas画一个矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas入门</title>
<style>
    body{background:#000;}
    #c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');

    //1 获取绘图接口
    var gd = oC.getContext("2d");

    //2 开始绘制路径
    gd.beginPath();

    //3 绘制 移动一个点 200*100
    gd.moveTo(100,100);
    gd.lineTo(300,100);
    gd.lineTo(300,200);
    gd.lineTo(100,200);

    gd.closePath();

    //绘制图形
    gd.stroke();
};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

用canvas画一个弧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{background:#000;}
    #c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");

    //1 获取绘图接口
    var　gd = oC.getContext("2d");
    //arc(x, y, radius, startAngle, endAngle, counterclockwise)
    //x, y 描述弧的圆形的圆心的坐标。
    //radius 描述弧的圆形的半径。
    //startAngle, endAngle 开始和结束的角度
    //逆时针为TRUE;顺时针为false
    gd.arc(200,200,150,d2a(0),d2a(60),false);
    gd.stroke();
};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

用canvas画一个圆形进度条(canvas绘制圆形进度条)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画圆</title>
<style>
    body{background:#000;}
    #c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;
}
window.onload = function(){
    var oC = document.getElementById('c1');

    //1 获取绘图接口
    var gd = oC.getContext("2d");
    var d = 0;
    setInterval(function(){
        gd.clearRect(0,0,oC.width,oC.height);
        gd.beginPath();
        gd.arc(200,200,150,d2a(0),d2a(d++),false);
        gd.stroke();
    },16);
}
</script>
</head>
<body>
    <canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas绘制圆形变色进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;
}
window.onload = function(){
    var oC = document.getElementById('c1');

    //1 获取绘图接口
    var gd = oC.getContext("2d");

    var cx = 300;
    var cy = 200;
    var r = 150;

    var d = 0;
    var h = 60;

    gd.lineWidth = "15";
    gd.font = h + "px kaiti";
    gd.fillStyle = "red";
    var timer = setInterval(function(){
        gd.clearRect(0,0,oC.width,oC.height);
        gd.beginPath();
        gd.arc(cx,cy,r,d2a(0),d2a(d++),false);
        gd.strokeStyle = "rgba("+255*d/360+",0,0,1)";
        gd.stroke();

        //写文字
        var str = Math.floor(d/360*100)+"%";
        var w = gd.measureText(str).width;
        gd.fillText(str,cx-w/2,cy+h/2);

        if (d > 360) {
            clearInterval(timer);
        }
    },16);
}
</script>
</head>
<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas绘制文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");

    //1 获取绘图接口
    var　gd = oC.getContext("2d");
    //2 fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
    //语法 context.fillStyle=color|gradient|pattern;
    //颜色/渐变对象/用于填充绘图的 pattern 对象
    gd.fillStyle = "blue";
    //font 属性设置或返回画布上文本内容的当前字体属性。
    //语法:context.font="italic small-caps bold 12px arial";
    //ctx.font="40px Arial";
    gd.font = "60px kaiti";

    //文字 y轴 以文字的左下角为准 
    //fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
    //语法:context.fillText(text,x,y,maxWidth);
    //text 规定在画布上输出的文本。
    //x 开始绘制文本的 x 坐标位置（相对于画布）。
    //y 开始绘制文本的 y 坐标位置（相对于画布）。
    //maxWidth 可选。允许的最大文本宽度，以像素计。
    gd.fillText("和派孔明",100,100);    
};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas绘制文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");

    //1 获取绘图接口
    var　gd = oC.getContext("2d");

    var str = "和派孔明"
    gd.fillStyle = "red";
    gd.font = "60px kaiti";
    //在画布上输出文本之前，检查字体的宽度
    //语法：context.measureText(text).width;
    var w = gd.measureText(str).width;

    //文字 y轴 以文字的左下角为准
    //context.fillText(text,x,y,maxWidth);
    //text x 开始绘制文本的 x 坐标位置（相对于画布）。 y 开始绘制文本的 x 坐标位置（相对于画布）。
    //maxWidth 可选。允许的最大文本宽度，以像素计。 
    gd.fillText(str,0,60);
    gd.fillText(str,oC.width/2 - w/2,60);
    gd.fillText(str,oC.width-w,60); 
};
</script>
</head>
<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas绘制部分饼图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;
}
window.onload = function(){
     var oC = document.getElementById('c1');

     //1 获取绘图接口
     var gd = oC.getContext("2d");
     var cx = 300;
     var cy = 230;
     var r = 150;

     gd.beginPath();
     gd.moveTo(cx,cy);
     gd.arc(cx,cy,r,0,d2a(120),false);
     gd.closePath();

     gd.fillStyle = "red";
     gd.fill();
     gd.stroke();
}
</script>
</head>
<body>
    <canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas绘制完整饼图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{background:#000;}
    #c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;
}
window.onload = function(){
    var oC = document.getElementById('c1');

    //1 获取绘图接口
    var gd = oC.getContext("2d");
    var cx = 300;
    var cy = 230;
    var r = 150;

    var arr = [200,300,120,80,240,198];

    var sum = arr.reduce(function(n1,n2){
        return n1 + n2;
    });

    var arrPie = [];
    arr.forEach(function(n){
        arrPie.push(n/sum*360);
    });

    var d = 0;
    arrPie.forEach(function(n){
        gd.beginPath();
        gd.moveTo(cx,cy);
        gd.arc(cx,cy,r,d2a(d),d2a(d+n),false);

        gd.fillStyle = "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")"; 
        gd.fill();
        gd.closePath();

        d +=n;
    });
};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas鼠标移入移出鼠标/矩形区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;
}
window.onload = function(){
    var oC = document.getElementById("c1");

    //1 获取绘图接口
    var　gd = oC.getContext("2d");

    var x = 200;
    var y = 100;
    var w = 200;
    var h = 100;

    gd.fillStyle = "#ccc";
    gd.fillRect(x,y,w,h);
    gd.strokeRect(x,y,w,h);

    oC.onmousemove = function(ev){

        if(ev.clientX >= x && ev.clientX <= x+w && ev.clientY >= y && ev.clientY <= y+h){
            console.log("移入");
            gd.fillStyle = "red";
            gd.fillRect(x,y,w,h);
        } else {
            console.log("移出");
            gd.fillStyle = "#ccc";
            gd.fillRect(x,y,w,h);
        }

    };
};
</script>
</head>
<body>
    <canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas鼠标移入移出鼠标/圆形区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");

    //1 获取绘图接口
    var　gd = oC.getContext("2d");

    var cx = 300;
    var cy = 200;
    var r  = 100;

    gd.beginPath();
    gd.arc(cx,cy,r,d2a(0),d2a(360),false);
    gd.closePath();
    gd.fillStyle = "#ccc";
    gd.fill();
    gd.stroke();

    oC.onmousemove = function(ev){

        var a = ev.clientX - cx;
        var b = ev.clientY - cy;

        var dis = Math.sqrt(a*a + b*b);
        gd.clearRect(0,0,oC.width,oC.height);
        if(dis <= r){//移入
            console.log("移入");
            gd.fillStyle = "red";
            gd.fill();
            gd.stroke();
        } else {//移出
            console.log("移出");
            gd.fillStyle = "#ccc";
            gd.fill();
            gd.stroke();
        }    
    };
};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas拖拽/矩形

<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");

    //1 获取绘图接口
    var　gd = oC.getContext("2d");

    var x = 200;
    var y = 100;
    var w = 200;
    var h = 100;

    gd.fillStyle = "#ccc";
    gd.fillRect(x,y,w,h);
    gd.strokeRect(x,y,w,h);

    oC.onmousedown = function(ev){

        var disX = ev.clientX - x;
        var disY = ev.clientY - y;

        if(ev.clientX >= x && ev.clientX <= x+w && ev.clientY >= y && ev.clientY <= y+h){
            document.onmousemove = function(ev){
                gd.clearRect(0,0,oC.width,oC.height);
                x = ev.clientX - disX;
                y = ev.clientY - disY;
                gd.fillStyle = "#ccc";
                gd.fillRect(x,y,w,h);
                gd.strokeRect(x,y,w,h);
            };
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;  
        };
        return false;   
    };

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas拖拽/圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");

    //1 获取绘图接口
    var　gd = oC.getContext("2d");

    var cx = 300;
    var cy = 200;
    var r  = 100;

    gd.beginPath();
    gd.arc(cx,cy,r,d2a(0),d2a(360),false);
    gd.closePath();
    gd.fillStyle = "#ccc";
    gd.fill();
    gd.stroke();

    oC.onmousedown = function(ev){

        var a = ev.clientX - cx;
        var b = ev.clientY - cy;
        var dis = Math.sqrt(a*a + b*b);

        if(dis <= r){//移入
            var disX = ev.clientX - cx;
            var disY = ev.clientY - cy;

            document.onmousemove = function(ev){
                gd.clearRect(0,0,oC.width,oC.height);
                cx = ev.clientX - disX;
                cy = ev.clientY - disY;
                gd.beginPath();
                gd.arc(cx,cy,r,d2a(0),d2a(360),false);
                gd.closePath();
                gd.fillStyle = "#ccc";
                gd.fill();
                gd.stroke();

            };
        }

        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;  
        };
        return false;

    };

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var　gd = oC.getContext("2d");

    var oLinear = gd.createLinearGradient(100,100,400,300);
    oLinear.addColorStop(0,"red");
    oLinear.addColorStop(0.6,"yellow");
    oLinear.addColorStop(1,"green");

    gd.fillStyle = oLinear;
    gd.fillRect(0,0,oC.width,oC.height);

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas渐变2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var　gd = oC.getContext("2d");

    var oRadial = gd.createRadialGradient(300,200,100,300,200,200);
    oRadial.addColorStop(0,"red");
    oRadial.addColorStop(0.6,"yellow");
    oRadial.addColorStop(1,"green");

    gd.fillStyle = oRadial;
    gd.fillRect(0,0,oC.width,oC.height);

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas背景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{background:#000;}
    #c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var　gd = oC.getContext("2d");

    var oImg = new Image();

    oImg.onload = function(){
        //
        var pattern = gd.createPattern(oImg,"repeat-y");
        gd.fillStyle = pattern;
        gd.fillRect(0,0,oC.width,oC.height);
    };

    oImg.src = "1.jpg";
};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas画图片1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    body{background:#000;}
    #c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var　gd = oC.getContext("2d");

    var oImg = new Image();

    oImg.onload = function(){

        gd.drawImage(oImg,100,200); 
    };

    oImg.src = "6.jpg";
};
</script>
</script>
</head>
<body>
    <canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas画图片2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var　gd = oC.getContext("2d");

    var oImg = new Image();

    oImg.onload = function(){

        gd.drawImage(oImg,100,200,200,100); 
    };

    oImg.src = "6.jpg";
};
</script>
</head>
<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas画图片3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var　gd = oC.getContext("2d");

    var oImg = new Image();

    oImg.onload = function(){

        gd.drawImage(
            oImg,
            //sx,sy,sw,sh,
            0,0,60,60,
            //dx,dy,dw,dh
            100,100,60,60

        );  
    };

    oImg.src = "coinAni2.png";
};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas画图片4（动画）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById("c1");

    var　gd = oC.getContext("2d");

    var oImg = new Image();

    oImg.onload = function(){
        var i = 0;
        setInterval(function(){
            gd.clearRect(0,0,oC.width,oC.height);
            gd.drawImage(
                oImg,
                //sx,sy,sw,sh,
                0,60*(i%10),60,60,
                //dx,dy,dw,dh
                100,100,60,60
            );  

            i++;
        },100);
    };

    oImg.src = "coinAni2.png";
};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas变形——旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    //旋转
    gd.rotate(d2a(30));
    gd.strokeRect(300,150,200,100);

    gd.fillStyle = "rgba(0,0,0,0.1)";
    gd.fillRect(0,0,oC.width,oC.height);

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas变形——缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    //缩放
    gd.scale(0.5,0.5);
    gd.strokeRect(300,150,200,100);

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas变形——平移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    //平移
    gd.translate(200,0);
    gd.strokeRect(100,150,200,100); 
};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas变形——平移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    //平移

    gd.strokeRect(100,50,200,100);

    gd.translate(200,0);
    gd.strokeRect(100,300,200,100);

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas变形——平移2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    //平移
    gd.translate(200,0);
    gd.strokeRect(100,50,200,100);

    gd.translate(-200,0);
    gd.strokeRect(100,300,200,100);

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas中心点旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    //旋转

    var d = 0;
    setInterval(function(){
        gd.save();
        gd.rotate(d2a(d++));
        gd.strokeRect(300,150,200,100);
        gd.restore();
    },30);

    /*gd.fillStyle = "rgba(0,0,0,0.1)";
    gd.fillRect(0,0,oC.width,oC.height);*/

};
</script>
</head>
<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas中心点旋转2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    gd.strokeRect(300,150,200,100);
    //
    //2 平移画布到物体的中心点
    gd.translate(300+100,150+50);

    //3. 旋转
    gd.rotate(d2a(60));

    //1 把自己移动到画布的中心点
    gd.strokeRect(-100,-50,200,100);


    gd.fillStyle = "rgba(0,0,0,0.1)";
    gd.fillRect(0,0,oC.width,oC.height);

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas中心点旋转动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    var d = 0;
    setInterval(function(){

        gd.clearRect(0,0,oC.width,oC.height);
        gd.strokeRect(300,150,200,100);
        gd.save();
        drawRect(300,150,200,100,d++);
        gd.restore();
    },30);


    function drawRect(x,y,w,h,r){
        //2把画布移动到物体的中心点
        gd.translate(x+w/2,y+h/2);
        //3旋转
        gd.rotate(d2a(r));
        //1把物体移动到画布中心点
        gd.strokeRect(-w/2,-h/2,w,h);
    }

};
</script>
</head>
<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas中心点旋转4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    var d = 0;
    setInterval(function(){
        gd.save();
        drawRect(300,150,300,100,d++);
        gd.restore();
    },30);

    function drawRect(x,y,w,h,r){
        //2把画布移动到物体的中心点
        gd.translate(x+w/2,y+h/2);
        //3旋转
        gd.rotate(d2a(r));
        //1把物体移动到画布中心点
        gd.strokeRect(-w/2,-h/2,w,h);
    }

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas左上角旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    var d = 0;
    setInterval(function(){
        gd.clearRect(0,0,oC.width,oC.height);
        gd.save();
        //目标
        gd.strokeRect(300,200,200,100);
        gd.translate(300,200);
        gd.rotate(d2a(d++));
        gd.strokeRect(0,0,200,100);

        gd.restore();
    },30);

};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>

canvas右下角旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
body{background:#000;}
#c1{ background:#fff;}
</style>
<script>
function d2a(n){
    return n*Math.PI/180;   
}
window.onload = function(){
    var oC = document.getElementById("c1");
    var　gd = oC.getContext("2d");

    var d = 0;
    setInterval(function(){
        gd.clearRect(0,0,oC.width,oC.height);
        gd.save();
        //目标
        gd.strokeRect(300,200,200,100);


        gd.translate(300+200,200+100);
        gd.rotate(d2a(d++));
        gd.strokeRect(-200,-100,200,100);

        gd.restore();
    },30);


};
</script>
</head>

<body>
<canvas id="c1" width="800" height="500"></canvas>
</body>
</html>
xyphf_和派孔明
关注
专栏目录
canvas入门系列(二)：Canvas的基本用法
人生代码 ---- 公众号
05-04 607
</canvas> 标签不可省节 与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。 渲染上下文（The rendering context） <canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘...
canvas入门
thankYou_2018的博客
09-25 209
最近在做自己网站首页的的时候，总想加一些酷炫的效果展示在首页，顺便接触一点新东西，想来想去，最后还是学习了canvas，这里写个博客算是记录自己这几天的学习成果，方便以后遗忘时查看。 canvas是什么？ 点击这里了解什么是canvas 餐前酒（分享一些运用了canvas的网站）： http://i-remember.fr/en/ https://www.html5tricks.com/ 看了这些...
canvas初学笔记（万字详细版）
最新发布
懒羊羊大王的博客
08-05 943
canvas初学笔记，万字超详细版（附带实战源码）
canvas入门系列(一)：画布元素
人生代码 ---- 公众号
05-04 813
HTML5 Canvas元素是一个类似于，或标记的HTML标记，但其内容是使用JavaScript呈现的。为了利用HTML5 Canvas，我们需要将canvas标签放在HTML文档中的某个位置，使用JavaScript访问canvas标签，创建上下文，然后利用HTML5 Canvas API绘制可视化。 在使用canvas时，了解canvas元素和canvas上下文之间的区别非常重要，因为人们经...
canvas入门系列(四)：使用样式和颜色
人生代码 ---- 公众号
05-04 886
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
canvas 入门例子 11
10-08
本篇文章将深入探讨“canvas入门例子11”，带你了解Canvas的基本用法和一些常见的绘图操作。 1. **Canvas基本结构** 在HTML中，我们可以使用`<canvas>`标签来创建一个画布。例如： ```html <canvas id="myCanvas...
2.42 Canvas系列课程第三课Canvas图像处理课程预告｜Canvas高级内容2｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
2.42_Canvas系列课程第三课Canvas图像处理课程预告｜Canvas高级内容2｜Canvas图形、动画、游戏开发从入门
Canvas入门教程
weixin_46056955的博客
02-10 482
HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）
canvas基本入门
sleepwalker_1992的专栏
06-04 315
canvas是HTML5提供的一种新标签 <canvas></canvas> 帆布 画布 canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5之前的web页面只能用...
canvas 快速入门
p1967914901的博客
06-08 933
在本文中，我们将学习的特性，包括如何在HTML文档中引入Canvas以及在Canvas上绘制图形和各种对象。我们也将学习如何修改绘制在Canvas上的图形和对象，以及如何擦除它们。最后，将通过一个例子来学习如何将Canvas，尺寸设置为浏览器窗口的大小。与和类似，元素完全不需要任何外部插件就能够运行。你只需要使用 HTML 并使用2D谊染上下文API(2D rendering context API)编写一些JavaScript代码。即使你现在还不了解什么是2D渲染上下文API，也不用担心一你很快就会熟悉这
Canvas快速入门教程
u012925833的博客
05-03 1872
目录 Canvas入门教程 Canvas概述 1. 与Flas的区别 2. 创建Canvas画布标签 3. 用Javascript操作2D画布 4. API 笔触、填充 1. 简述 3. 绘制路径 4. 绘制样式 6. 快速绘制 6. 绘制复杂图像 7. API 弧 1. 绘制弧线 2. API 绘制渐变 1. 创建渐变色 2. API 文字 1. 添加文字 2. 调整...
canvas基础一
徐同保的专栏
09-26 383
 1.   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;canvas 绘制两个长方形&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;can
canvas入门详细教程(W3C)
RD_Xiaobai的博客
06-25 1040
详细介绍画布canvas的属性及方法，和矩形，路径，转化，文本，图像绘制等多个模块的使用。并附上代码示例+代码注解。
简单canvas入门
APieceOfBullshit
07-25 152
简单canvas入门 - 幕布 简单canvas入门 创建canvas以及初始化 <canvas id="canvas" width="1024" height="768"></canvas>注意这个widt...
canvas 简单入门
river、的博客
01-02 555
转自：xmt1139057136的专栏 HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图形方面的
Canvas学习：Canvas入门准备
wulixiaoxiao1的博客
03-18 1893
由于工作的需要，最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。 今天这篇文章是学习canvas的一些准备工作。 canvas元素 也是HTML中的一个元素，可以给这个元素添加一些HTML属性，比如使用width和height来控制其大小，也可以通过style给它设置一些基本样式。同样也可以它添加id名
HTML5 Canvas基础教程：入门与元素详解
HTML5 Canvas入门基础教程是针对初学者设计的一系列指导，旨在帮助他们掌握这个强大的HTML5特性。Canvas是HTML5新增的一个元素，专门用于通过JavaScript进行图形绘制、动画制作和数据可视化。与传统的元素相比，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值