一、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. 基础知识之 - C# Using的用法

    C#里面Using有两种用法: 1.作为指令. using+命名空间,导入其他命名空间中定义的类型,这样可以在程序中直接用命名空间中的类型,不必指定命名空间: 命名空间是.NET程序在逻辑上的组织结构 ...

  2. Java学习第二十五天

    1:如何让Netbeans的东西Eclipse能访问. 在Eclipse中创建项目,把Netbeans项目的src下的东西给拿过来即可. 注意:修改项目编码为UTF-8 2:GUI(了解) (1)用户 ...

  3. 20个最受欢迎的Linux命令（转）

    本文根据 commandlinefu 网站的历史排名,筛选出了前 20 个得票最高的 Linux 命令.看看你都能熟练使用了吗? 1.以 root 帐户执行上一条命令 sudo !! 2.利用 Pyt ...

  4. 线程的Interrupt方法与InterruptedException解析

    线程阻塞状态与等待状态(当一个线程处于被阻塞或等待状态时,它暂时不活动,不允许任何代码且消耗最少的资源) 当一个线程试图获得一个内部的对象锁(而不是java.util.concurrent库中的锁), ...

  5. hdu 3255 体积并

    http://www.cnblogs.com/kane0526/archive/2013/03/07/2948446.html http://blog.csdn.net/acdreamers/arti ...

  6. Facade模式实现文件上传（Flash+HTML5）

    一.前言 确定了渐进式增强的上传方式,接下来我们需要将上传功能从具体的业务逻辑中剥离出来,作为公共组件供业务层调用.这就要求我们必须对业务层隐藏上传细节,只暴露统一的上传API.这时候大家是不是跟我一 ...

  7. vue.js练习经验总结

    1.最好JSON数据与(模板里 v-bind里绑定的自定义属性不要重名),根据console控制台的提示来看,应该是重名所引起的编译错误 2.还有个很奇怪的问题,局部注册vue的过滤器,到了模板之后不 ...

  8. python调用其他文件的类和函数

    在同一个文件夹下 调用函数 source.py文件: def func(): pass new.py文件: import source # 或者 from source import func 调用类 ...

  9. 【数据库】8.0 MySQL入门学习（八）——创建并使用数据库、获得数据库和表的信息

    1.0 使用SHOW语句找出服务器上当前存在什么数据库: mysql> SHOW DATABASES; 每台机器上的数据库列表是不同的,但是很可能有mysql和test数据库.mysql是必需的 ...

  10. ArcGIS for Server安全与LDAP配置

    ArcGIS for Server安全与LDAP配置 1.安全性概述 ArcGIS Server使用基于角色的访问控制来管理对受保护资源的访问.访问GIS资源的权限只能分配给角色.单独的用户只能通过从 ...