html5 canvas demo

解决:

<!doctype <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>tt</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        function draw(){
            var c = document.getElementById('c');
            var ctx = c.getContext('2d');
            ctx.fillStyle="rgb(200,0,0)"
            ctx.fillRect(100,100,150,150);
            ctx.fillStyle="rgba(0,0,200,0.5)";
            ctx.fillRect(150,150,200,200);
        }
        function getCtx(){
            var c = document.getElementById('c');
            var ctx = c.getContext('2d');
            return ctx;
        }
        function drawPath(){
            var ctx = getCtx();
            ctx.beginPath();
            ctx.moveTo(50,50);
            ctx.lineTo(50,100);
            ctx.lineTo(100,100);
            ctx.stroke();
        }
        function drawFace(){
            var c = getCtx();
            c.beginPath();
            c.arc(75,75,50,0,Math.PI*2,true);
            c.moveTo(110,75);
            c.arc(75,75,35,0,Math.PI);
            c.stroke();
        }
        function drawSVGPath(){
            var c= getCtx();
            c.strokeStyle="#ff0000";
            var p = new Path2D("M10 10 h 80 v 80 h -80 Z");            
            c.stroke(p);
        }
        function drawText(){
            var c = getCtx();
            c.font = "50px serif";
            c.fillStyle = "#00FF00";
            c.strokeText("你好",100,100);
        }
    </script>
</head>

<body onload="drawText()">
    <canvas id="c" width="500" height="500" />
</body>

</html>

<!doctype <!DOCTYPE html>

<html>

<head>

function draw(){

var c = document.getElementById('c');

var ctx = c.getContext('2d');

ctx.fillStyle="rgb(200,0,0)"

ctx.fillRect(100,100,150,150);

ctx.fillStyle="rgba(0,0,200,0.5)";

ctx.fillRect(150,150,200,200);

}

function getCtx(){

var c = document.getElementById('c');

var ctx = c.getContext('2d');

return ctx;

}

function drawPath(){

var ctx = getCtx();

ctx.beginPath();

ctx.moveTo(50,50);

ctx.lineTo(50,100);

ctx.lineTo(100,100);

ctx.stroke();

}

function drawFace(){

var c = getCtx();

c.beginPath();

c.arc(75,75,50,0,Math.PI*2,true);

c.moveTo(110,75);

c.arc(75,75,35,0,Math.PI);

c.stroke();

}

function drawSVGPath(){

var c= getCtx();

c.strokeStyle="#ff0000";

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

c.stroke(p);

}

function drawText(){

var c = getCtx();

c.font = "50px serif";

c.fillStyle = "#00FF00";

c.strokeText("你好",100,100);

}

</script>

</head>

</body>

</html>

参考:

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage

IT问题

程序员的疑难杂症录

html5 canvas demo

发表评论取消回复

发表评论 取消回复

发表评论取消回复