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. 帝国cms刷新内容页提示.phome_ecms_news_data_' doesn't exist

    帝国cms后台刷新提示.phome_ecms_news_data_' doesn't exist解决方法: 刷新所有信息内容页面时提示“Table '*.phome_ecms_article_data ...

  2. SDUT OJ 数据结构实验之串一：KMP简单应用 && 浅谈对看毛片算法的理解

    数据结构实验之串一:KMP简单应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...

  3. 使用Lazy对构造进行重构后比较

    用于测试在是否使用Lazy 的情况下,服务器负载,及服务提供情况对比.     服务器环境:   在此机器上安装了1 Hyper-V ,分配走1G内存,同时在本地上安装 SQLServer ,   在 ...

  4. jenkins安装maven工具

    下载maven工具,然后解压到/usr/local下面 然后在jenkins上面添加maven工具.指定他的设置配置文件(全局) 指定maven的目录位置 应用保存即可 !!! 虽然maven安装简单 ...

  5. springcloud整合bus

    bus的使用主要是配合springcloud config部分来一起使用,并没有单独使用 首先建立服务端: <dependency> <groupId>org.springfr ...

  6. bzoj3252 攻略 dfs序+线段树

    题目传送门 题目大意:给出一棵树,1为根节点,每个节点都有权值,每个叶子节点都是一个游戏的结局,选择k个游戏结局,使得权值总和最大,同一个节点不会被重复计算. 思路:这道题最关键的是要想到一个性质,就 ...

  7. SGU - 495 概率DP

    题意:n个带礼物的盒子和m个人,每个人拿一个盒子并放回,如果里面有礼物就拿走(盒子还是留下),问m个人带走礼物的期望 #include<iostream> #include<algo ...

  8. c# MVC返回小驼峰Json(首字母小写)

    1.与前端交互时,前端总希望传过去的json字段名首字母小写,但是.net规范是首字线大写 如果就写了下面的转换方法 /// <summary> /// Poco类字段名转换成首字母小写的 ...

  9. C#.net 设置Access-Control-Allow-Origin来实现跨域

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

  10. Java Web编程

    一.二.三有空补 四.  Web应用的安全 1.  CSS攻击,跨站脚本攻击 跨站脚本,顾名思义,就是恶意攻击者利用网站漏洞往Web页面里插入恶意代码,一般需要以下几个 条件: (1)客户端访问的网站 ...