canvas-基础绘制

最新推荐文章于 2023-10-26 14:19:16 发布

wyn314

最新推荐文章于 2023-10-26 14:19:16 发布

阅读量273

点赞数

分类专栏： HTML5 文章标签： canvas 基础

本文链接：https://blog.csdn.net/csdnwyn314/article/details/78283688

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. canvas基础绘制

画一个矩形，简单使用路径，绘制文字

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>测试canvas画布</h1>
<canvas id="canvasTest" width="500" height="300"></canvas>
<canvas id="canvasTest1" width="500" height="300"></canvas>
<canvas id="canvasTest2" width="500" height="300"></canvas>
<canvas id="canvasTest3" width="500" height="300"></canvas>
<script type="text/javascript">
    function draw(id){
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEEFF';
        context.fillRect(0,0,500,300);
        context.fillStyle = 'blue';
        context.strokeStyle = 'yellow';
        context.lineWidth = 1;
        context.fillRect(50,50,100,100);
        context.strokeRect(50,50,100,100);
        context.font = 'italic 20px sans-serif';
        var txt = "canvas画一个矩形";
        context.fillText(txt,10,30);
    };
    function draw1(id){
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEEFF';
        context.fillRect(0,0,500,300);
        for(var i=0; i<10; i++){
            context.beginPath();  // 绘制开始
            context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
            context.closePath();  // 绘制结束
            context.fillStyle='rgba(255,0,0,0.25)';
            context.fill();
        }
        context.font = 'italic 20px sans-serif';
        var txt = "canvas使用路径绘制圆";
        context.fillText(txt,100,30);
    };
    function draw2(id){
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEEFF';
        context.fillRect(0,0,500,300);
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();  // 绘制开始
        context.fillStyle='rgb(100,255,100)';
        context.strokeStyle = 'rgb(0,0,100)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 *11;

        for(var i=0; i<30; i++){
            var x = Math.sin(i*dig);
            var y = Math.cos(i*dig);
            context.lineTo(dx + x * s, dy + y * s);
        }

        context.closePath();  // 绘制结束
        context.fill();
        context.stroke();
        context.font = 'italic 20px sans-serif';
        var txt = "canvas使用路径-lineTo";
        context.fillText(txt,100,30);
    }

    function draw3(id) {
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        /*context.fillStyle = '#000000';
        context.font = 'italic 20px sans-serif';
        context.textBaseline = 'top';
        context.fillText('示例文字',0,0);*/
        context.font = 'italic 20px sans-serif';
        var txt = "绘制文字及复用";
        var tml = context.measureText(txt);
        context.fillText(txt,10,30);
        context.fillText(tml.width,tml.width+10,30);
        context.font = "bold 30px sans-serif";
        var tm2 = context.measureText(txt);
        context.fillText(txt, 10,70);
        context.fillText(tm2.width, tm2.width + 10, 70);
    }
    draw3('canvasTest3');
    draw2('canvasTest2');
    draw('canvasTest');
    draw1('canvasTest1');
</script>
</body>
</html>

wyn314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas-基础绘制

1. canvas基础绘制画一个矩形，简单使用路径，绘制文字<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><h1>测试canvas画布</h1><canvas id="canvasTest" width="500" height="300">
复制链接

扫一扫