一、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. hibernate框架的搭建

    1 导入所需的jar包 1 导入hibernate必须的jar包 2 导入驱动包 2 创建数据库,准备表,实体 1 创建hibernate数据库 CREATE DATABASE hibernate; ...

  2. 水平垂直居中方案与flexbox布局

    [前端攻略]最全面的水平垂直居中方案与flexbox布局   最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而 ...

  3. BNU 20950 ——沉重的货物 —————— · 最短路、最短边最大化」

    沉重的货物 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class name: ...

  4. HDU 5635 ——LCP Array ——————【想法题】

    LCP Array Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  5. Java学习第十七天

    1:登录注册案例(理解) 2:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法: ...

  6. sql时间区间查询性能测试

    这个测试针对"一个月"的区间来查询数据.分datetime类型和nvachar类型. 先比较datetime类型: 一.datediff函数 declare @beginTime ...

  7. XML深入了解（XML JavaSprint）

    XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据. XMLHttpRequest 对象是开发者的梦想,因为您能够: 在不重新加载页面的情况下更新网页 在 ...

  8. shiro 配置导图

    1 web.xml配置:shiro filter必须放在其他filter之前 <filter> <filter-name>shiroFilter</filter-name ...

  9. java常用API之DateFormat

    DateFormat 类: DateFormat 类是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间.日期/时间格式化子类(如 SimpleDateFormat类)允许进行格 ...

  10. SpagoBI 和 开源ERP(iDempiere)整合入门

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...