html5 canvas画布

 

 

<!DOCTYPE html>
<!-- saved from url=(0037)https://qd.andiff.net/guaguale/c.html -->
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script>
        window.onload = function(){
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.translate(100,100);//设置画布中心，旋转时是按中心点为基础来旋转的，默认(0,0)
//            ctx.rotate(5*Math.PI/180);//旋转角度
            ctx.fillStyle="#FF0000";
            ctx.fillRect(-75,-75,150,100);

            var ctx = c.getContext("2d");
            //画一条线
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.moveTo(250,0);//定义线条开始坐标
            ctx.lineTo(300,150);//定义线条结束坐标
            ctx.stroke();

            //画圆
            ctx.beginPath();
            ctx.arc(400,100,50,0,2*Math.PI);//x,y,r,begin.end
            ctx.stroke();

            //画字
            ctx.font="20px Arial";
            ctx.fillText("这里",380,100);
            ctx.strokeText("Hello World",380,120);

            //载图
            var img= document.getElementById("img");
            ctx.drawImage(img,0,250,200,100);

        }

    </script>
</head>

<body style="">
<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #cd3;"></canvas>
<img id="img" src="https://www.baidu.com/img/PCpad_012830ebaa7e4379ce9a9ed1b71f7507.png" style="display:none"/>


</body>
</html>

 

posted @ 2021-03-06 16:30  君子笑而不语  阅读(142)  评论(0)    收藏  举报