html5——画布

最新推荐文章于 2022-09-04 16:17:06 发布

HuiDT

最新推荐文章于 2022-09-04 16:17:06 发布

阅读量1.3k

点赞数 2

分类专栏： HTML+CSS 文章标签： Canvas html5

本文链接：https://blog.csdn.net/qq_42842786/article/details/97888131

版权

HTML+CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

一、Canvas
二、坐标
三、线条
四、圆形
五、渐变
六、图像
七、视频
七、附

由于服务器更新，这部分资源内容暂未更新
我看过一些用Canvas创作特效的例子，非常棒，我讲的连皮毛都不算，只能说介绍下Canvas是个啥。

一、Canvas

一般管他叫画布，因为canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，使用JavaScript控制
点击测试例子

<!DOCTYPE html>
	<html>
        <body>
            <canvas id="myCanvas" width="200" height="100"></canvas>
        </body>
        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var cxt=c.getContext("2d");
            cxt.fillStyle="#FF0000";
            cxt.fillRect(0,0,150,750);
            </script>
    </html>

二、坐标

点击测试例子

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css"> 
            body
            {
                font-size:90%;
                font-family:Georgia, 'Times New Roman', Times, serif
            }
        </style>

        <script type="text/javascript"> 
            function cnvs_getCoordinates(e)
            {
            x=e.clientX;
            y=e.clientY;
            document.getElementById("xycoordinates").innerHTML="坐标: (" + x + "," + y + ")";
            }
            
            function cnvs_clearCoordinates()
            {
            document.getElementById("xycoordinates").innerHTML="";
            }
        </script>
    </head>
    <body style="margin-left:9px;">
        <p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
        <div id="coordiv" style="float:left;width:1000px;height:500px;border:9px solid #0e4183" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
        <div id="xycoordinates"></div>
    </body>
</html>

三、线条

点击测试例子

<!DOCTYPE HTML>
<html>
    <body>
        <canvas id="myCanvas" width="900" height="450" style="border:9px solid #274cc7;">
            你的浏览器不支持Canvas！
        </canvas>
        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var cxt=c.getContext("2d");
            cxt.moveTo(100,100);
            cxt.lineTo(700,234);
            cxt.lineTo(300,400);
            cxt.stroke();   //stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
        </script>
    </body>
</html>

四、圆形

点击测试例子

<!DOCTYPE HTML>
<html>
    <body>
        <canvas id="myCanvas" width="900" height="450" style="border:9px solid #353c97;">
            Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">

            var c=document.getElementById("myCanvas");
            var cxt=c.getContext("2d");
            cxt.fillStyle="#c5398f";
            cxt.beginPath();
            cxt.arc(420,225,90,0,Math.PI*2,true);
            cxt.closePath();
            cxt.fill();

            
            var d=document.getElementById("myCanvas");
            var xixi=d.getContext("2d");
            xixi.fillStyle="#353c97";
            xixi.beginPath();
            xixi.arc(100,230,89,0,1.5*Math.PI,false);//fasle或true规定应该逆时针还是顺时针绘图
            cxt.closePath();  //选择是否闭合
            cxt.stroke();
        </script>
    </body>
</html>

五、渐变

谈到渐变，先说说颜色，rgb大家都知道，太简单。不想说，需要提醒的是RGBA，意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。
颜色表示方法也不知一种，可直接写名字，比如blue，颜色名参考
可以设置rgb或者rgba，比如rgb(136,136,136)，每位数最大值为255，还可以使用十六进制表示，该方法对应rgb方法，通常在#后面跟六位数十六进制数，255用十六进制便是即为FF，比如红色即为#FF0000

点击测试例子

<!DOCTYPE HTML>
<html>
        <canvas id="myCanvas" width="700" height="350" style="border:1px solid rgb(174, 170, 197);">
        Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var cxt=c.getContext("2d");
            var grd=cxt.createLinearGradient(0,0,175,50);
            grd.addColorStop(0,"rgb(0, 255, 0)");
            grd.addColorStop(1,"rgb(66, 49, 161)");
            cxt.fillStyle=grd;
            cxt.fillRect(20,90,600,90);
        </script>
    </body>
</html>

六、图像

点击测试例子图片加载会比较慢，服务器比较一般

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            #drawer
            {
                text-align: center;
                padding-top: 200px;
            }
            #myCanvas
            {
                border:4px solid red;
            }
        </style>
    </head>
    <body>    
        <div id="drawer">
            <canvas id="myCanvas" >
                当前浏览器不支持canvas元素。
            </canvas>
        </div>
        
        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var cxt=c.getContext("2d");
            var img=new Image();
            img.src="BAG.jpg";
            img.onload=function()
            {
                console.log(img.width);//在控制台输出长和宽（可省略）
                console.log(img.height);
                
                cxt.drawImage(img,0,0,img.width,img.height,0,0,300,150);
                //drawImage() 方法在画布上绘制图像、画布或视频
                //注意参数意义drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
                //(img,x,y)从右下角开始定位   （width,height）规定宽度与高度 
                //(swidth,sheight)规定被剪切的部分  (sx,sy)规定被剪切部分
            }

        </script>
    </body>
</html>

关于drawImage(img,sx,sy,swidth,sheight,x,y,width,height);的参数

此处多说两句

console.log(img.width)类似于JavaScript中的alert()可在console中输出图片的长和宽，附上流风，飘然的风的相关链接
drawImage()则用于向canvas绘制图片，附w3school的相关解释

七、视频

将视频复制到canvas上，（视频源于抖音，有时候不一定能正常访问）
点击测试例子

<!DOCTYPE html>
<html>
    <head>
      <style>
        div
        {
          text-align: center;
        }
      </style>
    </head>

    <body>
      <div>
          <p>要使用的视频：</p>
          <video id="video1" controls width="270" autoplay>
            <source src="https://aweme.snssdk.com/aweme/v1/playwm/?s_vid=93f1b41336a8b7a442dbf1c29c6bbc56c4d6b1a0badd7058c2afdeb0d5e061cf4d11542c36587143a90cee8277b453c98223cdd73c0259b1e0a578756e7d8d09&line=0/" type='video/webm'>
          </video>
          <p>画布（每 30 毫秒，代码就会绘制视频的当前帧）：</p>
          <canvas id="myCanvas" width="270" height="480" style="border:1px solid #9e2424;">
            Your browser does not support the HTML5 canvas tag.
          </canvas>
      </div>

      <script>
        var v=document.getElementById("video1");
        var c=document.getElementById("myCanvas");
        ctx=c.getContext('2d');
        v.addEventListener('play', function(){var i=window.setInterval(function(){ctx.drawImage(v,0,0,270,480)},30);},false);
        //此处的30即为每30毫秒在Canvas上绘制一次
        v.addEventListener('pause',function() {window.clearInterval(i);},false);
        v.addEventListener('ended',function() {clearInterval(i);},false);  
      </script>
    </body>
</html>