什么是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. .2-浅析express源码之applicaiton模块(1)-咸鱼方法

    上一节讲了express的入口文件,当执行主函数,会调用app.init方法,这个方法就来源于application模块. 这个模块有很多方法,目前仅仅过一下初始化方法: app.init = fun ...

  2. Docker基础-端口映射与容器互联

    1.端口映射实现访问容器 1.从外部访问容器应用 在启动容器的时候,如果不指定对应的参数,在容器外部是无法通过网络来访问容器内部的网络应用和服务的. 当容器中运行一些网络应用,要让外部访问这些应用时, ...

  3. （原）SQL Server 代理作业执行持续时间简述

    本文目录列表: 1.SQL Server 代理作业概述2.获取代理作业执行时间方法一 3.获取代理作业执行时间方法二4.总结语 5.参考目录清单列表 正文:   1.SQL Server 代理作业概述 ...

  4. AutoMapper之集合和数组映射

    9.集合和数组映射 在项目中,集合和数组使用的很多的,继续下来就讲讲他们的映射,很简单. /// <summary> /// 源对象 /// </summary> public ...

  5. #if _MSC_VER &gt; 1000 #pragma once #endif 含义

    前提:MFC应用程序中,MainFrm 类头文件 MainFrm.h 中#if _MSC_VER > 1000#pragma once#endif // _MSC_VER > 1000解释 ...

  6. MVC在filter中如何获取控制器名称和Action名称

    使用ActionExecutingContext对象可以获取控制器名称.Action名称.参数名称以及参数值.路由和Action返回值不影响结果. 在代码中 [AttributeUsage(Attri ...

  7. [android] 帧动画和补间动画

    逐帧显示一张图片,连起来成为动画 在res/drawable/目录下,创建一个xxx.xml的文件 添加<animation-list>节点,设置是否循环android:oneshot:” ...

  8. js 下拉加载

    // 下拉加载    var clientHeight = $(window).height() //当前可视的页面高度    console.log(clientHeight) //滚动条到页面底部 ...

  9. JS 为什么在涉及到模块开发this的时候使用类似 self = this 的形式 p7

    JS 动态作用域(调用栈)实际上也没有准确说明的,大多数我们使用对多和认知上大多是词法作用域,但是this的机制跟动态作用域很像. var a = 2; function fn(){ console. ...

  10. mysql-学习笔记1

    1.while循环的一个方便的用法是循环处理一个SQL查询结果中的数据行. 2.mysqli_fetch_array(),这个内置的PHP函数从一个数据库查询的结果中获取一个数据行,可以搭配while ...