HTML5 canvas

最新推荐文章于 2023-06-28 08:49:04 发布

geekzsp

最新推荐文章于 2023-06-28 08:49:04 发布

阅读量419

点赞数

分类专栏：前端文章标签： html5 canvas

本文链接：https://blog.csdn.net/mixi9760/article/details/52181025

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="html5/js/audio5.min.js"  type="application/javascript"></script>

    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

    <style>

        article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
    </style>
</head>
<body>
<header>头部</header>
<footer>底部</footer>
<article>
    <audio  id="media" src="html5/聪明的一休.mp3" controls></audio>
    <video src="html5/姐是老中医%20高清.mp4" controls></video>
    <canvas id="myCanvas" width="1300px" height="1300px" style="border: 1px #F00  solid"></canvas>
    <canvas id="myCanvas1" width="100px" height="100px" style="border: 1px #F00 solid"></canvas>
    <canvas id="myCanvas2" width="100px" height="100px" style="border: 1px #F00 solid"></canvas>
    <img src="img_the_scream.jpg" alt="" id="img1">
</article>
<script>
    var mCanvas=document.getElementById("myCanvas");
    var cxt=mCanvas.getContext("2d");
    cxt.fillStyle="#F00";
    cxt.strokeStyle="#0F0";
    cxt.fillRect(10,10,100,100);
    cxt.beginPath();
    cxt.moveTo(0,0);
    cxt.lineTo(100,100);
    cxt.stroke();
    cxt.closePath();

    cxt.strokeStyle="#F0F";
    cxt.beginPath();
    cxt.moveTo(100,100);
    cxt.lineTo(250,309);
    cxt.closePath();
    cxt.stroke();

    cxt.font='30px Arial';
    cxt.fillText("ＨＥＬＬＯ　ＷＯＲＬＤ",130,50,100,100);
    cxt.strokeText("heelo world",200,200,100,100);

    cxt.beginPath();
    cxt.arc(95,50,40,0,2*Math.PI);
    cxt.stroke();

    cxt.beginPath();
    cxt.arc(300,300,100,0,2*Math.PI);
    cxt.fill();

    cxt.beginPath();
    cxt.arc(400,400,50,0,Math.PI*1.5);
    cxt.stroke();
//    线性渐变
    var  mCanvas1=document.getElementById("myCanvas1");
    var  cxt1=mCanvas1.getContext("2d");
  //  var xxjb1=cxt1.createLinearGradient(0,0,0,100);
//    createRadialGradient 径向渐变
    var xxjb1=cxt1.createRadialGradient(0,0,50,100,100,50);
    xxjb1.addColorStop(0,"#F00");
    xxjb1.addColorStop(1,"#0F0");
    cxt1.fillStyle=xxjb1;
    cxt1.strokeStyle=xxjb1;
    cxt1.fillRect(0,0,100,100);

   var myCavas=document.getElementById("myCanvas2");
    var cxt2=myCavas.getContext("2d");
    cxt2.drawImage(document.getElementById("img1"),0,0);
</script>
</body>
</html>

画布的平移缩放旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 100px;
            padding: 0px;
        }
    </style>
</head>
<body onload="darw()">
<canvas id="myCanvas" width="600px" height="600px" style="border: #F00 1px solid"></canvas>
<button onclick="canvasTranslate()">平移</button>
<button onclick="canvasScale()">缩放</button>
<button onclick="canvasRotate()">旋转</button>
<script>
    var myCanvas=document.getElementById("myCanvas");
    var context = myCanvas.getContext("2d");
    function darw(){

        context.arc(150,150,10,0,Math.PI*2,true);
        context.fill()
    }
    function  canvasTranslate(){
        context.translate(20,20);
        darw();
    }
    function canvasScale(){
        context.scale(1/2,2);
        darw();
    }

    function darwLine(){
        context.moveTo(560,80);
        context.lineTo(590,90);
        context.stroke()
    }
    function canvasRotate(){
        context.rotate(Math.PI/180*5);
        darwLine();
    }
</script>
</body>
</html>

geekzsp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="html5/js/audio5.min.js" type="application/javascript"></script> <script src="http://apps
复制链接

扫一扫