HTML5 캔버스에 대한 자세한 설명(3)-H5 튜토리얼-php.cn

HTML5 캔버스에 대한 자세한 설명(3)

黄舟

풀어 주다： 2017-03-17 15:39:52

원래의

1277명이 탐색했습니다.

이 섹션에서는 주로 캔버스의 다양한 사용법에 대해 설명합니다. 먼저, 캔버스 그리기를 적용하는 과정에서 겪었던 문제를 해결해 보겠습니다.

이상한 문제

다음 코드는 캔버스에 100*100 직사각형을 그립니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas基础练习</title>
<style> 
    .myCanvas{        
    border:1px solid #f00;       
     width:200px;       
      height:200px;   
       }
       </style>
       <script>
    window.onload = function(){
        var canvas = document.getElementById("myCanvas1");        
        var context = canvas.getContext("2d");        
        //设置矩形填充颜色为红色
        context.fillStyle = "red";        
        //从(10，10)位置绘制100*100的正方形
        context.fillRect(10,10,100,100);
    };
    </script>
    </head>
    <body>
    <canvas class="myCanvas" id="myCanvas1">
            你的浏览器不支持canvas。    </canvas>
            </body>
            </html>

로그인 후 복사

실행 결과는 다음과 같습니다.
HTML5 캔버스에 대한 자세한 설명(3)
뭐? 이상하게도 우리가 그린 것은 분명 정사각형인데 왜 직사각형이 되었는가? 코드를 확인해보세요. 문제가 없습니다!
코드를 바꿔보자! 스타일 :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas基础练习</title>
<style> 
    .myCanvas{
        border:1px solid #f00;
    }
</style>

<script>
    window.onload = function(){
        var canvas = document.getElementById("myCanvas1");
        var context = canvas.getContext("2d");

        //设置矩形填充颜色为红色
        context.fillStyle = "red";
        //从10，10位置绘制100*100的正方形
        context.fillRect(10,10,100,100);
    };
</script>
</head>

<body>
    <canvas class="myCanvas" id="myCanvas1">
            你的浏览器不支持canvas。
    </canvas>
</body>

</html>

로그인 후 복사

에서 너비 및 높이

속성을 제거하고 실행 결과를 확인하세요:
HTML5 캔버스에 대한 자세한 설명(3)
정상입니다!
두 코드의 차이점을 비교해 보세요. 두 번째는 스타일에서 너비 및 높이 속성 을 제거한 것 뿐이고 나머지는 완전히 동일합니다.

나중에 자료를 찾아보니 캔버스의 기본 크기는 300px*150px로 그림과 동일하다는 것을 알게 되었습니다. CSS에서 설정한 너비 및 높이 속성은 이 이미지를 늘리는 것과 동일합니다.

이런 방법으로 알아내는 것은 어렵지 않습니다. 첫 번째 사진은 실제로 두 번째 사진을 300px*150px에서 200px*200px로 늘린 결과입니다.

그럼 이미지 변형을 일으키지 않고 캔버스 크기를 올바르게 설정하는 방법은 무엇입니까?
두 가지 방법이 있습니다:

//第一种:在html标签中静态设置
<canvas width="200" height="200" id="myCanvas">

//第二种:使用Js代码动态设置
var canvas = document.getElementById("myCanvas1");
var canvas.width = 200;
var canvas.height = 200;

로그인 후 복사

경로 그리기

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas基础练习</title>
<style> 
    .myCanvas{
        border:1px solid #f00;
    }
</style>

<script>
    var canvasWidth;
    var canvasHeight;
    //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象
    function getContextById(elementId){
        var canvas = document.getElementById(elementId);
        canvasWidth = canvas.width;
        canvasHeight = canvas.height;
        var context = canvas.getContext("2d");
        return context;
    }

    function drawPath(){
        var context = getContextById("myCanvas");
        //清除画布
        context.clearRect(0,0,canvasWidth,canvasHeight);

        context.beginPath();
        /*绘制弧线，使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法  
        以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle  
        和endAngle。最后一个参数表示是否按逆时针方向计算，值为false表示顺时针方向计算。  
        */  
        context.arc(130,130,90,0,2*Math.PI,false);  
        /*arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给  
        定的半径radius穿过(x1,y1)  
        */  
        context.arcTo(310,220,400,130,80)  
        /*bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为  
         止，并且以(c1x,c1y)和(c2x,c2y)为控制的。  
        */  
        context.bezierCurveTo(320,210,400,250,310,300);  
        /*lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止*/  
        context.lineTo(0,300);  
        context.moveTo(130,220);  
        context.lineTo(100,300);  
        /*quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且  
        以(cx,cy)作为控制点  
        */  
        context.quadraticCurveTo(40,380,130,400);  
        context.lineTo(450,400);  
        /*rect(x,y,width,height):从点（x,y）开始绘制一个矩形路径*/  
        context.rect(80,80,100,100)  
        context.strokeStyle="rgba(0,0,255,0.5)";  
        //最后必须调用stroke()方法，这样才能把图像绘制到画布上。  
        context.stroke(); 
    }

</script>
</head>

<body>
    <canvas width="500" height="500" class="myCanvas" id="myCanvas">
            你的浏览器不支持canvas。
    </canvas>
    <div>
        <button onClick="drawPath()">绘制</button>
    </div>
</body>

</html>

로그인 후 복사

실행 효과:
HTML5 캔버스에 대한 자세한 설명(3)

텍스트 그리기

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas基础练习</title>
<style> 
    .myCanvas{
        border:1px solid #f00;
    }
</style>

<script>
    var canvasWidth = 300;
    var canvasHeight = 300;
    //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象
    function getContextById(elementId){
        var canvas = document.getElementById(elementId);
        canvasWidth = canvas.width;
        canvasHeight = canvas.height;
        var context = canvas.getContext("2d");
        return context;
    }

    function drawText(){
        var context = getContextById("myCanvas");
        //清除画布
        context.clearRect(0,0,canvasWidth,canvasHeight);

        //开始路径  
        context.beginPath();  
        //绘制外圆  
        context.arc(100,100,99,0,2*Math.PI,false);  
        //绘制内圆  
        //context.moveTo(194,100);//将绘图游标移动到（x,y），不画线  
        context.arc(100,100,94,0,2*Math.PI,false);  
        //绘制分针  
        context.moveTo(100,100);  
        context.lineTo(100,15);  
        //绘制时针  
        context.moveTo(100,100);  
        context.lineTo(35,100);  
        context.strokeStyle="rgba(0,0,255,0.5)";  
        //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 
        context.stroke(); 

        //绘制文本
        context.font="bold 14px Arial";  
        context.textAlign="center";  
        context.textBaseline="middle";//文本的基线
        context.fillText("3",200-15,100);
        context.fillText("6",100,200-15);
        context.fillText("9",15,100);
        context.fillText("12",100,15);  
        context.strokeStyle="rgba(0,0,255,0.5)";  
        //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 
        context.stroke();
    }

</script>
</head>

<body>
    <canvas width="200" height="200" class="myCanvas" id="myCanvas">
            你的浏览器不支持canvas。
    </canvas>
    <div>
        <button onClick="drawText()">绘制</button>
    </div>
</body>

</html>

로그인 후 복사

실행 효과 다음과 같습니다:
HTML5 캔버스에 대한 자세한 설명(3)

변환

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas基础练习</title>
<style> 
    .myCanvas{
        border:1px solid #f00;
    }
</style>

<script>
    var canvasWidth = 300;
    var canvasHeight = 300;
    //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象
    function getContextById(elementId){
        var canvas = document.getElementById(elementId);
        canvasWidth = canvas.width;
        canvasHeight = canvas.height;
        var context = canvas.getContext("2d");
        return context;
    }

    function drawText(){
        var context = getContextById("myCanvas");
        //清除画布
        context.clearRect(0,0,canvasWidth,canvasHeight);

        //开始路径  
        context.beginPath();  
        //绘制外圆  
        context.arc(100,100,99,0,2*Math.PI,false);  
        //绘制内圆  
        //context.moveTo(194,100);//将绘图游标移动到（x,y），不画线  
        context.arc(100,100,94,0,2*Math.PI,false);  

        //绘制文本
        context.font="bold 14px Arial";  
        context.textAlign="center";  
        context.textBaseline="middle";//文本的基线
        context.fillText("3",200-15,100);
        context.fillText("6",100,200-15);
        context.fillText("9",15,100);
        context.fillText("12",100,15);  
        context.strokeStyle="rgba(0,0,255,0.5)";  
        //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 
        context.stroke();

        //变换原点，将圆心变换为画布坐标原点 
        /*translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之  
        前由(x,y)表示的点  
        */  
        context.translate(100,100);

        //旋转1个弧度
        context.rotate(1);

        //绘制分针  
        context.moveTo(0,0);  
        context.lineTo(0,-85);  
        //绘制时针  
        context.moveTo(0,0);  
        context.lineTo(-65,0);  
        context.strokeStyle="rgba(0,0,255,0.5)"; 

        //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 
        context.stroke(); 

        //将原点恢复到原画布原点
        context.translate(-100,-100);
    }

</script>
</head>

<body>
    <canvas width="200" height="200" class="myCanvas" id="myCanvas">
            你的浏览器不支持canvas。
    </canvas>
    <div>
        <button onClick="drawText()">绘制</button>
    </div>
</body>

</html>

로그인 후 복사

실행 효과:
HTML5 캔버스에 대한 자세한 설명(3)

Shadow

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>canvas绘图</title>
</head>

<body>
    <canvas id="myCanvas" width="400" height="400" style="border:#0F0 solid 1px">A Drawing of something</canvas>
    <script>
        var drawing=document.getElementById("myCanvas");
        //确定浏览器支持<canvas>元素
        if(drawing.getContext){
            //取得绘图上下文对象的引用，“2d”是取得2D上下文对象
            var context=drawing.getContext("2d");
            //设置阴影
            context.shadowColor="rgba(0,0,0,0.5)"//设置阴影颜色
            context.shadowOffsetX=15;//设置形状或路径x轴方向的阴影偏移量，默认值为0；
            context.shadowOffsetY=15;//设置形状或路径y轴方向的阴影偏移量，默认值为0；
            context.shadowBlur=10;//设置模糊的像素数，默认值为0，即不模糊。
            //绘制红色填充矩形
            context.fillStyle="red";
            context.fillRect(10,10,100,100);
            //绘制半透明的蓝色矩形
            context.fillStyle="rgba(0,0,255,1)";
            context.fillRect(60,60,100,100);
        }
    </script>
</body>
</html>

로그인 후 복사

HTML5 캔버스에 대한 자세한 설명(3)