什么是Canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

Canvas浏览器支持

表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号。

Canvas的基本使用

<canvas id="canvas" height="300" width="300" style="background-color:#F00">

        您的浏览器不支持canvas标签

</canvas>

canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容或者进行画图操作，需要借助canvas API(HTML5的内置对context 对象)和javascript操作实现画图或者其他图像操作

标签内的文字表示当浏览器不支持这个标签的时候，会给出这个提示

该标签的默认宽度是300px，默认高度是150px，在给canvas设置宽高的时候需要使用width和height这两个属性来设置，不能再css样式中设置

 

 
 
Canvas的API详解
创建绘图环境以及画出一个填充的方块
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    window.onload = function(){

        var oCanvas = document.getElementById('canvas');

        var oCanvasContext = oCanvas.getContext('2d');//返回一个对象，创建绘图环境

        // 参数分别表示基于画布x轴的坐标像素和基于画布y轴的坐标像素以及绘制出来的图形的宽高

        oCanvasContext.fillRect(50,50,100,100);

    };

</script>

</head>

<body>

<canvas id="canvas" height="300" width="300" style="background-color: blue">

    您的浏览器不支持canvas标签

</canvas>

</body>

</html>

效果如下，蓝色的是画布，黑色的是画出来的图形，默认的填充颜色是黑色的

接着在画出一个带边框的方块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script>

    window.onload = function(){

        var oCanvas = document.getElementById('canvas');

        var oCanvasContext = oCanvas.getContext('2d');//返回一个对象，创建绘图环境

        // 参数分别表示基于画布x轴的坐标像素和基于画布y轴的坐标像素以及绘制出来的图形的宽高

        oCanvasContext.strokeRect(60,60,100,100);

    };

</script>

</head>

<body>

<canvas id="canvas" height="300" width="300" style="background-color: blue">

    您的浏览器不支持canvas标签

</canvas>

</body>

</html>

效果如下，默认的边框是1px的黑色的边框

1.canvas主要属性和方法
 
2.颜色、样式和阴影属性和方法
 
 
3.线条样式属性和方法
 
4.矩形方法
 
5.路径方法
 
6.转换方法
 
7.文本属性和方法
 
8.图像绘制方法
 
 
9.像素操作方法和属性
 
 
10.图像合成属性
 
11.其他方法
 
三、练习
1、画一条线段
<body>

    <canvas id="canvas" height="300" width="300" style="background-color:#F00">

        您的浏览器不支持canvas标签

    </canvas>

    <script>

        //获取画布DOM,还不能操作

        var canvas = document.getElementById("canvas");

        //设置绘图环境

        var cxt = canvas.getContext("2d");

        //alert(cxt);

        //可以再画线之前设置线的样式等

        cxt.lineWidth=10;//设置画笔的宽度

        cxt.strokeStyle="#FF9900"//设置画笔的颜色

        //画一条线段

        cxt.moveTo(20,20);//设定笔触的位置

        cxt.lineTo(100,20);//设置移动的方式

        cxt.stroke();//将以定义好的线显示

    </script>

</body>
2、画一个圆形
<body>

    <canvas id="canvas" height="300" width="300" style="background-color:#F00">

        您的浏览器不支持canvas标签

    </canvas>

    <script>

        //获取画布

        var canvas = document.getElementById("canvas");

         //设置绘图环境

        var cxt = canvas.getContext("2d");

        //设置画笔

        cxt.lineWidth=3;

        cxt.strokeStyle="#FF0";

        //画一个空心圆形

        //第一二个参数表示在哪个位置画圆，第三个参数表示圆的半径,第四个和第五个参数表示角度范围这里表示从0到360度，最后一个参数表示画圆的方向，顺时针或逆时针

        cxt.arc(200,200,50,0,360,false);

        cxt.stroke();

        cxt.closePath();

        //画一个实心圆形

        cxt.beginPath();

        cxt.fillStyle="green";//设置填充颜色

        cxt.arc(100,100,50,0,360,false);

        cxt.stroke();

        cxt.fill();

    </script>

</body>
3、画一个矩形
<body>

    <canvas id="canvas" height="800" width="900" style="background-color:#F00">

        您的浏览器不支持canvas标签

    </canvas>

    <script>

        //获取画布

        var canvas = document.getElementById("canvas");

         //设置绘图环境

        var cxt = canvas.getContext("2d");

        //设置画笔

        cxt.lineWidth=3;

        cxt.strokeStyle="#0FF";

        //画一个矩形

        cxt.beginPath();

        cxt.rect(100,20,100,100);

        cxt.stroke();

        cxt.closePath();

        //其他方法 建议使用此方式

        cxt.strokeRect(200,150,100,100);

        //实心矩形

        cxt.beginPath();

        cxt.rect(100,150,100,100);

        cxt.fill();

        cxt.closePath();

        //其他方法 建议使用此方式

        cxt.fillRect(300,390,100,100);

    </script>

</body>
4、写一段文字在画布中
<body>

    <canvas id="canvas" height="800" width="900" style="background-color:#F00">

        您的浏览器不支持canvas标签

    </canvas>

    <script>

        //获取画布

        var canvas = document.getElementById("canvas");

         //设置绘图环境

        var cxt = canvas.getContext("2d");

        //设置画笔

        cxt.lineWidth=3;

        cxt.strokeStyle="#0FF";

        //设置文字

        cxt.font="40px 宋体";//css font属性

        cxt.fillText("无兄弟，不编程",20,300);

        //将笔触设置为1像素

        cxt.lineWidth=1;

        cxt.strokeText("无兄弟，不编程",20,350);

    </script>

</body>
5、将一幅图片添加到画布中
<body>

    <canvas id="canvas" height="800" width="900" style="background-color:#F00">

        您的浏览器不支持canvas标签

    </canvas>

    <script>

        //获取画布

        var canvas = document.getElementById("canvas");

         //设置绘图环境

        var cxt = canvas.getContext("2d");

        //设置画笔

        cxt.lineWidth=3;

        cxt.strokeStyle="#0FF";

        //画图 把一幅图片画到画布中  注意webkit内核的浏览器 chrome和猎豹不支持

        var img =new Image();

        img.src="xiaomm.jpg";

        //第一个参数是对象，第二三个参数是从哪里开始画，第三四个参数表示要画的图像的大小

        cxt.drawImage(img,50,200,230,306);

    </script>

</body>

</html>
 
6、画一个三角形
<body>

    <canvas id="canvas" height="800" width="900" style="background-color:#F00">

        您的浏览器不支持canvas标签

    </canvas>

    <script>

        //获取画布

        var canvas = document.getElementById("canvas");

         //设置绘图环境

        var cxt = canvas.getContext("2d");

        //设置画笔

        cxt.lineWidth=3;

        cxt.strokeStyle="#0FF";

        //画一个三角形

        cxt.beginPath();

        //移动至开始点

        cxt.moveTo(300,300);//设置开始点

        cxt.lineTo(300,400);

        cxt.lineTo(400,450);

        cxt.closePath();//填充或者画路径需要先闭合路径再画

        cxt.stroke();

        //实心三角形

        cxt.beginPath();

        //移动至开始点

        cxt.moveTo(300,600);

        cxt.lineTo(300,700);

        cxt.lineTo(400,650);

        cxt.closePath();

        cxt.fill();

    </script>

</body>

</html>
7、反转图片
<body>

    <canvas id="canvas" height="800" width="900" style="background-color:#F00">

        您的浏览器不支持canvas标签

    </canvas>

    <script>

        //获取画布

        var canvas = document.getElementById("canvas");

         //设置绘图环境

        var cxt = canvas.getContext("2d");

        //设置画笔

        cxt.lineWidth=3;

        cxt.strokeStyle="#0FF";

        //旋转图片 图片

                //设置旋转环境

                cxt.save();

                    //在异次元空间重置0,0点的位置

                    cxt.translate(20,20);

                //图片/形状旋转

                    //设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180

                    cxt.rotate(-30*Math.PI/180);

                    //旋转一个线段

                    cxt.lineWidth=10;

                    cxt.beginPath();

                    cxt.moveTo(0,0);

                    cxt.lineTo(20,100);

                    cxt.stroke();

                    cxt.closePath();

                //将旋转之后的元素放回原画布

                cxt.restore();

                //过程不可颠倒 先设置00点在旋转角度，然后画图

                //旋转小萌萌

                cxt.save();

                cxt.translate(20,370);

                cxt.rotate(-10*Math.PI/180);

                var img =new Image();

                img.src="xiaomm.jpg";

                cxt.drawImage(img,0,0,230,306);

                cxt.restore();

    </script>

</body>

</html>
 

HTML5中的Canvas详解的更多相关文章

  1. html5中output元素详解

    html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...

  2. html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  3. html5中time元素详解

    html5中time元素详解 一.总结 一句话总结: time的使用的话主要是将时间放在datetime属性里面:<time datetime="2015-10-22"> ...

  4. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  5. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  6. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  7. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  8. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

  9. 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...

随机推荐

  1. MFC框架之线程局部存储

    线程局部存储中用到的API基础:(TLS:Thread Local Storage) 1.在主线程中申请索引 g_index=::TlsAlloc(); 2.在线程函数中使用索引 存值:::TlsSe ...

  2. sql语句将查询的结果拼接成字符串

    表样: sqlserver: --方法1 DECLARE @STR VARCHAR(8000) SELECT @STR=ISNULL(@STR+',','')+userID FROM (SELECT  ...

  3. 记一次SQL Server Insert触发器编写过程

    实现功能:新增特定类型的新闻时,自动追加特定的背景图片. 第一版(错误信息:不能在 'inserted' 表和 'deleted' 表中使用 text.ntext 或 image 列),代码如下: - ...

  4. Web前端基础——HTML

    一 .HTML 概述 HTML : 超文本标记语言 HyperText markup language <marquee behavior="alternate"> & ...

  5. 字符串按首字母分组并ToDictionary的实现

    这是一道面试题目,要求实现字符串按首字母分组并ToDictionary输出,当时没有做出来,后面研究了一下,现在将这道题的几种实现方式记录下来. 首先初始化数据源,是一个List<string& ...

  6. Java - "JUC" ReentrantReadWriteLock

    Java多线程系列--“JUC锁”08之 共享锁和ReentrantReadWriteLock ReadWriteLock 和 ReentrantReadWriteLock介绍 ReadWriteLo ...

  7. Java虚拟机 - 多态性实现机制

    [深入Java虚拟机]之五:多态性实现机制——静态分派与动态分派 方法解析 Class文件的编译过程中不包含传统编译中的连接步骤,一切方法调用在Class文件里面存储的都只是符号引用,而不是方法在实际 ...

  8. java.lang.IllegalArgumentException: findUserById is ambiguous in Mapped Statements collection

    这是由于mybatis的mapper  xml文件中的id 名字和mybatis内置的方法可能有冲突导致的,  更改xml 的id  名字就可以了!

  9. 记录搭建Odoo框架

    一.获取 Odoo 源码 Odoo 是一个开源项目,我们可以轻松的在 Github 上找到它的源码.本次中使用的是 12.0 版本的 Odoo,所以在拉取代码时选择 12.0 的分支.确保拉取的速度, ...

  10. AngularJS学习之 ngTable 翻页 功能以及利用angular service准备测试数据

    1.官网链接  https://github.com/esvit/ng-table#4.0.0 2.安装ngTable后,一定要记得先注册到自己的项目 .module('pttengApp', [ ' ...