一、canvas的API：

　　1、颜色、样式和阴影：

　　

　　2、线条样式属性和方法：

　　

　　3、路径方法：

　　　

　　4、转换方法：

　　　　

　　5、文本属性和方法：

　　　　

　　6、像素操作方法和属性：

　　　　

　　7、其他：

　　　　drawImage：向画布上绘制图像、画布或视频  chrome不支持

　　　　globalAlpha：设置或返回绘图的当前 alpha 或透明值

　　　　globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上

二、代码示例：

<!doctype html>

<html>

    <head></head>

    <body>

        <canvas width="500" height="800" style="background:yellow"  id="canvas">

            您的浏览器当前版本不支持canvas标签

        </canvas>

        <script>

            //获取画布DOM  还不可以操作

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

            //alert(canvas);

            //设置绘图环境

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

            //alert(cxt);

            //画一条线段。

                //开启新路径

                cxt.beginPath();

                //设定画笔的宽度

                cxt.lineWidth=10;

                //设置画笔的颜色

                cxt.strokeStyle="#ff9900";

                //设定笔触的位置

                cxt.moveTo(20,20);

                //设置移动的方式

                cxt.lineTo(100,20);

                //画线

                cxt.stroke();

                //封闭路径

                cxt.closePath();

            //画一个空心圆形  凡是路径图形必须先开始路径，画完图之后必须结束路径

                //开始新路径

                cxt.beginPath();

                //重新设置画笔

                cxt.lineWidth=3;

                cxt.strokeStyle="green";

                cxt.arc(200,200,50,0,360,false);//x坐标，y坐标，半径，起始角度，结束角度

                cxt.stroke();

                //封闭新路径

                cxt.closePath();

            //画一个实心圆形

                cxt.beginPath();

                //设置填充的颜色

                cxt.fillStyle="rgb(255,0,0)";

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

                cxt.fill();

                cxt.stroke();

                cxt.closePath();

            //画一个矩形

                cxt.beginPath();

                cxt.rect(300,20,100,100);//x坐标，y坐标，长，宽

                cxt.stroke();

                cxt.closePath();

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

                cxt.strokeRect(300,150,100,100)

                //实心矩形

                cxt.beginPath();

                cxt.rect(300,270,100,100);

                cxt.fill();

                cxt.closePath();

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

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

            //设置文字

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

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

                //将笔触设置为1像素

                cxt.lineWidth=1;

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

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

                var img =new Image();

                img.src="xiaomm.jpg";

                cxt.drawImage(img,20,370,230,306);//图片对象，x坐标，y坐标，后面两个参数设置图片显示的宽度和高度

            //画一个三角形

                cxt.beginPath();

                //移动至开始点

                cxt.moveTo(300,500);

                cxt.lineTo(300,600);

                cxt.lineTo(400,550);

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

                cxt.stroke();

                //实心三角形

                cxt.beginPath();

                //移动至开始点

                cxt.moveTo(300,600);

                cxt.lineTo(300,700);

                cxt.lineTo(400,650);

                cxt.closePath();

                cxt.fill();

            //旋转图片

                //设置旋转环境

                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基本API介绍及应用 1的更多相关文章

  1. Html5 学习系列（五）Canvas绘图API快速入门（2）

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  2. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  3. Html5 学习系列（五）Canvas绘图API快速入门（1）

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  4. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  5. HTML5<canvas>标签:简单介绍(0)

    <canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...

  6. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  7. HTML5之本地文件系统API - File System API

    HTML5之本地文件系统API - File System API 新的HTML5标准给我们带来了大量的新特性和惊喜,例如,画图的画布Canvas,多媒体的audio和video等等.除了上面我们提到 ...

  8. HTML5中Canvas概述

    一.HTML5 Canvas历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若 ...

  9. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

随机推荐

  1. B站视频下载（VideoHelper）

    继续上次的知乎爬虫, 这次开始了哔哩哔哩的爬虫实践: 首先介绍下如何下载吧: VideoHelper 里面有三种方式下载b站视频. 同样的流程, 还是先抓包,分析参数,寻找参数(包括之前的请求包和页面 ...

  2. 8086键盘输入实验——《x86汇编语言：从实模式到保护模式》读书笔记07

    1.BIOS中断 我们可以为所有中断类型自定义中断处理过程,包括内部中断.硬件中断和软中断. BIOS中断,又称BIOS功能调用,主要是为了方便地使用最基本的硬件访问功能.通常,为了区分针对同一硬件的 ...

  3. Coursera 机器学习 第8章（下） Dimensionality Reduction 学习笔记

    8 Dimensionality Reduction8.3 Motivation8.3.1 Motivation I: Data Compression第二种无监督问题:维数约简(Dimensiona ...

  4. LeetCode 319 ——Bulb Switcher——————【数学技巧】

    319. Bulb Switcher My Submissions QuestionEditorial Solution Total Accepted: 15915 Total Submissions ...

  5. C# .net页面乱码

    可在web.config中设置 <globalization requestEncoding="utf-8" responseEncoding="utf-8&quo ...

  6. Hashtable(哈希表)

    简体字繁体字转化: class Program { static void Main(string[] args) { Hashtable ht = new Hashtable(); ; i < ...

  7. node会话管理——cookie-parser

    cookie是由服务器发送给客户端(浏览器)的小量信息. 我们知道,平时上网时都是使用无状态的HTTP协议传输出数据,这意味着客户端与服务端在数据传送完成后就会中断连接.这时我们就需要一个一直保持会话 ...

  8. 02.ArrayList和HashTable

    ArrayList集合 数组的缺点: (1).数组只能存储相同类型的数据. (2).数组的长度要在定义时确定. 集合的好处: (1).集合可以存储多种不同类型的数据. (2).集合的长度是可以任意改变 ...

  9. Spring Chapter4 WebSocket 胡乱翻译 （一）

    4. WebSocket 包含了Servlet stack,原生WebSocket交互,通过SockJS模拟,并且通过STOMP在WebSocket之上订阅.发布消息. 4.1 简介 不扯了,看到这个 ...

  10. 网易回合制游戏录像批量下载（失效 不是因为代码 是因为网易官方关闭了录像网站 ：P）

    最近在访问网易大话西游2的录像专区时,发现页面还是很早之前的板式,网易的编辑并没有打算重新美化的打算,不由得内心一寒,结合之前好几个回合制游戏的倒闭,让很多人回顾都没办法回顾, 而且,很多人现在也没有 ...