一、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. 内行看门道：看似“佛系”的《QQ炫舞手游》，背后的音频技术一点都不简单

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 3月14日,腾讯旗下知名手游<QQ炫舞>正式上线各大应用商店,并迅速登上App Store免 ...

  2. 省市区json数据

    window.LocalList = [ { region:{ name:'北京市', code:'11', state:[ { name:'北京', code:'01', city:[ {name: ...

  3. [转]NLog Layout Renderers ${}

    https://github.com/nlog/NLog/wiki/Layout-Renderers Layout renderers are template macros that are use ...

  4. c# 使用队列保存图片

    Invoke(new EventHandler(delegate { Bitmap bitmap2 = (Bitmap)eventArgs.Frame.Clone(); ThreadPool.Queu ...

  5. Spring.NET入门

    Spring.NET入门  http://www.cnblogs.com/haogj/archive/2011/06/10/2077540.html http://www.cnblogs.com/ha ...

  6. IO流之流的操作规律

    流的操作规律 IO流中对象很多,解决问题(处理设备上的数据时)到底该用哪个对象呢? 把IO流进行了规律的总结(四个明确): l  明确一:要操作的数据是数据源还是数据目的. 源:InputStream ...

  7. Eclipse中搭建Android开发环境

    一.搭建Android开发环境 准备工作:下载Eclipse.JDK.Android SDK.ADT插件 下载地址:Eclipse:http://www.eclipse.org/downloads/ ...

  8. Java入门到精通——框架篇之Spring源码分析Spring两大核心类

    一.Spring核心类概述. Spring里面有两个最核心的类这是Spring实现最重要的部分. 1.DefaultListableBeanFactory 这个类位于Beans项目下的org.spri ...

  9. Flexviewer调用特定的widget

    Flexviewer调用特定的widget: 之前一直是自己添加个固定的key来调用widget 但是后来发现框架早就为你写好啦调用widget的方法 在WidgetManager中有个 public ...

  10. android学习之VelocityTracker

    今天大概的学习了一下 VelocityTracker ,用来监控手势速度的,在View移动过程中,可以有个缓冲的移动.  我觉得初步的使用起来是很简单的. 首先移动依靠的是Scroller类,Scro ...