html5——画布

最新推荐文章于 2024-07-12 11:14:49 发布
最新推荐文章于 2024-07-12 11:14:49 发布
阅读量1.3k 收藏 3
点赞数 2
分类专栏： HTML+CSS 文章标签： Canvas html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42842786/article/details/97888131
版权

文章目录

由于服务器更新，这部分资源内容暂未更新
我看过一些用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);的参数

此处多说两句

七、视频

将视频复制到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>

七、附

附上其他博主的讲解（我觉得比我讲得好）

HuiDT
关注
专栏目录
html5画布
shaonianmoyou的博客
07-15 471
html5，画布
HTML5画布
m0_48375854的博客
11-11 1743
HTML画布一、画布的使用1、使用画布1、创建画布2、获取画布3、准备画笔2、绘制线1、初始位置2、连线端点 一、画布的使用 画布是在页面中绘制图形的特殊区域 1、使用画布 1、创建画布 使用HTML5中的canvas标签可以在网页中创建画布。 语法格式： <canvas id="画布名称" width="数值" height="数值"> 您的浏览器不支持canvas </canvas> 2、获取画布 要想在JavaScript中控制画布，首先要获取画布。使用getElement
HTML5 画布秘籍（二）
最新发布
龙哥盟
07-12 911
本章重点介绍 HTML5 画布、图像和视频的另一个非常令人兴奋的主题。除了提供定位、调整大小和裁剪图像和视频的基本功能外，HTML5 画布 API 还允许我们访问和修改每个像素的颜色和透明度。让我们开始吧！现在我们知道如何访问图像数据，包括图像或视频中每个像素的 RGBA，我们的下一步是探索像素处理的可能性。在这个食谱中，我们将通过反转每个像素的颜色来反转图像的颜色。本章将揭示画布变换的威力，它可以极大地简化复杂的绘图，并提供新的功能，否则我们将无法拥有。
HTML5 画布（canvas）
CSH_lucky的博客
04-06 422
一、HTML5画布介绍 HTML5 标签用于通过脚本（通常是JavaScript）动态绘制图形。 canvas本身元素没有绘图功能，它只是图形的容器， 您必须使用脚本来实际绘制图形。 getContext()方法返回一个对象，该对象提供在画布上绘制的方法和属性。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 <canvas id="roundness" width="6...
HTML 5 Canvas
aizhen8632的博客
06-14 142
canvas 元素用于在网页上绘制图形。 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高...
HTML5之画布
weixin_45846241的博客
04-13 639
HTML5中的画布是什么？ HTML5 的 canvas 元素（简称画布）是使用 JavaScript 在网页上绘制图像的元素。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 canvas 元素 <canvas width="1000" height="800">浏览器不支持HTML5！</canvas&g...
HTML5 —— canvas画布
impact_factor的博客
07-22 1043
canvas画布 画布：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 绘制图形的过程 创建画布：使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> JavaScript中获取画布 document.getElementById('id')
html5的画布canvas——画出简单的矩形、三角形实例代码
01-19
首先在html页面中放置一个canvas元素，其中canvas元素应该具备三个属性ID、width、height。 复制代码代码如下: ”demo” width=”600″ height=”600″></canvas> 取得canvas对象并取得上下文var cxt=document....
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
09-28
HTML5的Canvas元素是网页动态图形绘制的重要工具，它允许开发者通过JavaScript来绘制2D图形。在这个实例中，我们将深入探讨如何利用Canvas API来画出弧线和执行旋转操作。 首先，让我们了解如何画出弧线。在Canvas...
从入门到精通HTML5——PDF——网盘链接
02-27
　1.3 HTML的基本结构 5 　1.3.1 HTML文件的编写方法 5 　1.3.2 文件开始标签<html> 7 　1.3.3 文件头部标签<head> 7 　1.3.4 文件标题标签<title> 7 　1.3.5 文件主体标签<body> 7 　1.3.6...
html5——canvas
肖的博客
09-14 263
1.创建一个画布（Canvas） 一个画布在网页中是一个矩形框，通过 canvas 元素来绘制. 注意: 默认情况下 canvas 元素没有边框和内容。 canvas简单实例如下: &amp;lt;canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot;&amp;gt;&amp;lt;/canvas&amp;gt; 2.使
【HTML】HTML5的画布
早睡早起长头发的博客
09-04 2582
一、画布的定义 二、画布的使用 1.创建画布 2.获取画布 3.获取画笔 三、画直线 1.初始位置 2.连接端点 3.描边 4.线的样式 (1)宽度 (2)颜色 (3)端点的形状 四、线的路径 1.重置路径 2.闭合路径 五、图形填充 六、绘制圆
html5 画布
wangatong的博客
01-16 343
window.onload = function () { let vs = document.querySelector('#myCanvas') let can = vs.getContext('2d') /** * 三角形 */ //移动坐标轴 can.moveTo(50, 50) //画直线 can.lineTo(150, 50) can.lineTo(50, 150) can.lineTo(50, 50) //填充颜色 can.fillSt
使用HTML5画布
heart_1014的博客
03-19 1182
使用HTML5画布： 一、第一步：使用canvas控件确定画布 二、第二步：使用javascript绘制图形 1、脚本标签 2、步骤： 1）第一步：获取界面的画布 var canvas=document.getElementById("myCanvas");document代表从整个文档中搜索；getElementById按照控件id来获取控件；var canvas定义一
HTML5的画布
Han_Zhou_Z的博客
11-12 439
目录 一、H5中的画布标签 二、获取画布 三、获取画笔 四、画直线 五、线条的路径 六、图形填充 七、绘制圆 一、H5中的画布标签 <canvas id="画布的名称" width="宽度" height="高度"> </canvas> 二、获取画布 var cas = document.getElementById("画布的名称") 三、获取画笔 context对象，使用该对象可以在画布上绘制图形 var ctx = cas.getContext(
HTML5传奇：画布Canvas与富媒体新时代
"这篇资料介绍了HTML5中的一个重要特性——画布Canvas，并通过示例代码展示了如何使用Canvas进行图形绘制。HTML5是Web开发的新标准，它引入了许多新特性，包括跨平台运行、硬件要求低、解决浏览器兼容性问题等。其中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值