canvas简介

​ <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

​ 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

​ Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

​ Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。

<canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

​ 如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。

支持<canvas>的浏览器会只渲染<canvas>标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则 会直接渲染替代内容。

双圆demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;padding: 0;

        }

        .box{

            text-align: center;

        }

        #myCanvas{

            background: #eee;

        }

    </style>

</head>

<body>

   <div class="box">

        <canvas id="myCanvas" height="400" width="400"></canvas>

   </div>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

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

cxt.fillStyle="green";

cxt.beginPath();

cxt.arc(200,200,190,0,Math.PI,false);

cxt.closePath();

cxt.fill();

cxt.fillStyle="#fff";

cxt.strokeStyle='red'

cxt.beginPath();

cxt.arc(200,200,180,0,Math.PI*2,true);

cxt.closePath();

cxt.stroke();

cxt.fill();

</script>

</body>

</html>

1、dom.getContext('2d')

2、fillStyle  填充颜色

lineWidth 线条宽度  cxt.lineWidth='10'

3、strokeStyle  线条颜色

4、beginPath() 开始一条路径，或重置当前的路径

　 closePath()从当前点到开始点的路径

5、fill填充当前绘图（路径）、stroke绘制已定义的路径

6、arc(x,y,r,sAngle,eAngle,counterclockwise);画圆

　　

参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

7、moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

　　

8、fillRect(x,y,width,height); X、Y为坐标,左上角

　　fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

　　提示：请使用fillStyle属性来设置用于填充绘图的颜色、渐变或模式。

　　strokeRect 绘制无填充的矩形.
10、clearRect(x,y,width,height);清除矩形9、rect(x,y,width,height);

参考网址:http://www.w3school.com.cn/tags/html_ref_canvas.asp

学习canvas的更多相关文章

  1. qml基础学习 Canvas画笔

    一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...

  2. Html5学习--canvas

    canvas元素的实际尺寸(宽度,高度)是由标签上的属性width和height来决定的. 这两个属性不设置时默认值为:宽度=300px,高度=150px. 如果在样式表里设置width和height ...

  3. UGUI学习——Canvas基础组件

    UGUI的分辨率自适应的机制 UGUI中,Canvas(画布)可以看成电脑屏幕,其功能和属性都是一样的.游戏中的分辨率自适应主要包括两部分: 1. 缩放适应:是在不同尺寸的屏幕下,整体缩放比例的计算方 ...

  4. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. 学习Canvas这一篇文章就够了

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

  6. 学习canvas画布

    我们可以用画布(Canvas)绘制各种图形,下面代码是绘制的一个圆形: <!DOCTYPE html> <html> <head> <title>Can ...

  7. UNITY3D UGUI学习--canvas

    首先从canvas的参数说起走. Canvas Component是UI布局和渲染的抽象空间,所有的UI元素都必须在此组件之下. Render Mode UI的渲染方式,有三种: Screen Spa ...

  8. 学习 | canvas实现图片懒加载 && 下滑底部加载

    用canvas实现图片的懒加载并且下滑到据底部60px的时候再次加载数据,模仿UC浏览器的新闻加载. 完整代码:https://github.com/dirkhe1051931999/writeBlo ...

  9. 学习Canvas绘图与动画基础 制作弧和圆（五）

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

随机推荐

  1. SQL Server 数据类型与.Net Framework平台映射

    SQL Server 和 .NET Framework 基于不同的类型系统.  例如,.NET Framework Decimal 结构的最大小数位数为 28,而 SQL Server 的 decim ...

  2. 使用webpack开发ES6程序的正确姿势

    1.cnpm install babel-loader babel-core babel-preset-es2015 -D 2.cnpm install babel-plugin-transform- ...

  3. Math.random取随机整数

    Math.random可以随机获取0-1的数字,今天用的需要给id随机赋值,小数不好控制,就只取整. 网上很多是 int i=(int)(Math.random()*100): 报错: 后找到 var ...

  4. Preprefix sum BZOJ 3155 树状数组

    题目描述 前缀和(prefix sum)Si=∑k=1iaiS_i=\sum_{k=1}^i a_iSi​=∑k=1i​ai​. 前前缀和(preprefix sum) 则把SiS_iSi​作为原序列 ...

  5. Linux 使用echo向文件末尾追加命令

    //echo后边用单引号包围要添加的内容 echo 'add content'>>/home/data/test.sh 注意>>表示在原来的文件末尾上进行追加,如果使用的是&g ...

  6. 搭建svn管理平台

    安装svn服务器:yum -y install subversion 创建svn的目录:mkdir -p /data/svn 初始化svn目录:svnadmin create /data/svn co ...

  7. Linux 查看文件夹命令

    1,按照时间升序 命令:ls -lrt 详细解释:        -l use a long listing format 以长列表方式显示(详细信息方式)       -t sort by modi ...

  8. [Microsoft] 微软技术平台的Cloud Building平台AppVeyor

    Link: http://www.tuicool.com/articles/uMBZba http://www.appveyor.com/ 随着云技术的不断完善,基于云的应用越发丰富起来.AppVey ...

  9. asp web服务

    项目名--->添加--->web引用 网址:http://www.webxml.com.cn/zh_cn/index.aspx https://blog.csdn.net/linshich ...

  10. PKI公钥基础设施简介

    PKI(Public Key Infrastructure)公钥基础设施是提供公钥加密和数字签名服务的系统或平台,目的是为了管理密钥和证书.一个机构通过采用PKI 框架管理密钥和证书可以建立一个安全的 ...