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. 最小生成树问题：Kruskal算法 AND Prim算法

    Kruskal算法: void Kruskal ( ) {     MST = { } ;                           //边的集合,最初为空集     while( Edge ...

  2. python怎样在一行中捕获多个异常

    所属网站分类: python基础 > 异常处理 作者:浮沉 链接:http://www.pythonheidong.com/blog/article/71/ 来源:python黑洞网,专注pyt ...

  3. javascript的代码块

    a block of code 注意到这个问题是在看书的时候,中文版中出现“代码片段”这样的词语,于是就去翻看了英文版的原书.书中的用了a block of code,难道不应该翻译成代码块吗?(作为 ...

  4. 动态规划 70.climbing Stairs

    1. 记忆化搜索 - 自上向下的解决问题:使用vector来保存每次计算的结果,如果下次再碰到同样的需要计算的式子就不需要重复计算了. 2. 动态规划 - 自下向上的解决问题 解法一:自顶向下 解法二 ...

  5. Python 实现 ZoomEye API SDK

    版权声明:未经作者授权,禁止转载! ZoomEye想必大家都很熟悉,自从官方开放了API,网上各种版本的SDK乱飞.今天我也来发一个自己写的. 首先我们从https://github.com/SEC0 ...

  6. 在OnActionExecuted 获取请求参数的值(包含类类型)

    1.在OnActionExecuting里 获取请求参数的值 比较简单 /// <summary> /// 获取首参数的值 /// </summary> /// <par ...

  7. PIE SDK栅格数据唯一值渲染

    1. 功能简介 栅格数据唯一值渲染,是以像元为单位,不同的像元值设置不同的颜色,从而达到唯一值显示的效果. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 实例化唯一值渲染对象 第二步 初始 ...

  8. ubuntu root用图形界面登录

    http://blog.csdn.net/weimine/article/details/69055536 http://blog.csdn.net/gongxifacai_believe/artic ...

  9. Yii1 的数据库操作整理

    1.根据条件查询一个集合 $objectResult=Post::model()->findAll($condition,$params);$objectResult=Post::model() ...

  10. Xtts v4变化&先决条件&已知问题

    V4变化的主要有:     1.这个采购使用简化的命令.源的一个命令(--backup)和目标的一个命令(--restore). 2.此过程只需要在源和目标的$ TMPDIR(res.txt)之间复制 ...