通过对canvas的初步了解，经过几天的总结，吧canvas的基本用法总结如下：方便以后查阅

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>canvas 使用实例</title>

</head>

<body style="padding:0; margin:0;" onLoad="draw()">

<canvas width="150" height="150" style=" border:1px solid #ccc;" id="canvas"></canvas>

<script type="text/javascript">

function draw(){

    var canvas = document.getElementById("canvas");//获取canvas元素

    var ctx = canvas.getContext("2d");//定义canvas场景

/**基本形状的绘制**/

    //绘制矩形

    ctx.fillStyle = "rgb(200,0,0)";//填充颜色

    ctx.fillRect(0,0,55,50);//绘制图形

    ctx.fillStyle = "rgba(0,0,200,0.5)";//填充颜色带透明度

    ctx.fillRect(30,30,55,50);//绘制图形

    ctx.clearRect(30,30,55,50);//绘制空白的矩形

    ctx.strokeRect(30,30,55,50);//绘制带边框的矩形

    //按路径绘制图形

    ctx.beginPath();//开始路径绘图

    ctx.moveTo(75,50);//笔触起点

    ctx.lineTo(100,75);//画直线

    ctx.lineTo(100,25);//画直线

    ctx.lineTo(75,50);//画直线(其实已经回到了起点)

    ctx.closePath();//关闭路径(不关闭也可以,在填充的时候回字段闭合路径)

    ctx.fill();//填充路径

    //使用路径绘制一个笑脸(主要用到圆形画法)

    ctx.beginPath();

    ctx.arc(75,75,50,0,Math.PI*2,true);//ctx.arc(圆心横坐标,圆心纵坐标,半径,起始角度,终止角度,顺时针);

    ctx.moveTo(110,75);

    ctx.arc(75,75,35,0,Math.PI,false);

    ctx.moveTo(65,65);

    ctx.arc(60,65,5,0,Math.PI*2,true);

    ctx.moveTo(95,65);

    ctx.arc(90,65,5,0,Math.PI*2,true);

    ctx.stroke();

    //用路径画矩形

    ctx.rect(75,75,50,50);

    ctx.stroke();

    //贝塞尔曲线,二次贝塞尔曲线,三次贝塞尔曲线..........

/**样式与色彩**/

    //填充颜色与轮廓颜色

    ctx.rect(75,75,50,50);

    ctx.fillStyle = "rgb(200,0,0)";//填充颜色

    ctx.fill();

    ctx.strokeStyle = "orange";//轮廓颜色orange/#FFA500/rgb(255,165,0)/rgba(255,165,0,1)

    ctx.stroke();

    //画一个渐变效果的四色格

    ctx.fillStyle = '#FD0';

    ctx.fillRect(0,0,75,75);

    ctx.fillStyle = '#6C0';

    ctx.fillRect(75,0,75,75);

    ctx.fillStyle = '#09F';

    ctx.fillRect(0,75,75,75);

    ctx.fillStyle = '#F30';

    ctx.fillRect(75,75,75,75);

    ctx.fillStyle = "#FFF";//填充颜色设置成白色

    ctx.globalAlpha = 0.2;//设置透明度

    for(var i=0;i<7;i++){

        ctx.beginPath();

        ctx.arc(75,75,10+10*i,0,Math.PI*2,true);

        ctx.fill();

    }

    //画4个带有渐变的矩形

    ctx.fillStyle = 'rgb(255,221,0)';

    ctx.fillRect(0,0,150,37.5);

    ctx.fillStyle = 'rgb(102,204,0)';

    ctx.fillRect(0,37.5,150,37.5);

    ctx.fillStyle = 'rgb(0,153,255)';

    ctx.fillRect(0,75,150,37.5);

    ctx.fillStyle = 'rgb(255,51,0)';

    ctx.fillRect(0,112.5,150,37.5);

    for(var i=0;i<10;i++){

        ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';

        for(var j=0;j<4;j++){

            ctx.fillRect(5+i*14,5+j*37.5,14,27.5);

        }

    }

/**绘制文本**/

    ctx.font = "24px serif";//设置文本样式:font/textAlign/textBaseline/direction     文本测量

    ctx.fillText("Hello Word",10,50);//实心文字

    ctx.strokeText("Hello Word",10,50);//空心文字

/**强大的处理图片**/

    //引入背景图片,并且以该图片作为背景进行绘图

    var img = new Image();

    img.onload = function(){

        ctx.drawImage(img,0,0);//处理图像 0 0处开始绘制图像

          ctx.beginPath();

          ctx.moveTo(30,96);

          ctx.lineTo(70,66);

          ctx.lineTo(103,76);

          ctx.lineTo(170,15);

          ctx.stroke();

    };

    img.src = "1.jpg";//引入图像的位置

    //对图片进行缩放 比例不等

    var img = new Image();

    img.onload = function(){

        ctx.drawImage(img,0,0,150,150);

    };

    img.src = '1.jpg';

/**变形**/

    //save 与 restore 图像的样式保存于内存(数据是以"堆"的方式保存到内存里面)

    ctx.fillRect(0,0,150,150);

    ctx.save();

    ctx.fillStyle = '#09F';

    ctx.fillRect(15,15,120,120);

    ctx.save();

    ctx.fillStyle = '#FFF';

    ctx.globalAlpha = 0.5;

    ctx.fillRect(30,30,90,90);

    ctx.restore();

    ctx.fillRect(45,45,60,60);//注意样式

    ctx.restore();

    ctx.fillRect(60,60,30,30);//注意样式

    //移动 translate 移动基准点

    ctx.fillRect(0,0,50,50);

    ctx.translate(50,50);

    ctx.fillRect(0,0,50,50); 

    //还有旋转/缩放/变形 等更多操作,有待深入研究

/**更多高级操作请访问:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage**/

}

</script>

</body>

</html>

html5 canvas基本用法的更多相关文章

  1. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

  2. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  3. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. HTML5 Canvas arc()函数//////////////////////(转)

    HTML5 Canvas arc()函数   实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...

  5. HTML5 Canvas arc()函数

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  6. HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  7. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  8. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  9. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

随机推荐

  1. Codeforces Gym 100203I I WIN 最大流

    原题链接:http://codeforces.com/gym/100203/attachments/download/1702/statements.pdf 题解 首先寻找每个I,然后枚举形状,如果匹 ...

  2. 使用jersey组件向图片资源服务器上传图片报403，405，409 Method Not Allowed错误

    一.错误如下 在使用Jersey进行图片跨服务上传时遇到了如下问题: 二.代码如下 1.pom.xml <dependency> <groupId>com.sun.jersey ...

  3. JD路径配置及myeclipse主题和提示设置

    1. JDKAN安装及环境变量配置 安装jdk,注意记住安装路径(F:\Java\jdk1.8.0_121 )(个人爱好) 系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(F ...

  4. python导入sklearn模块出现DLL load failed的解决办法

    笔者安装的python版本是2.7.6,最近在导入sklearn(版本:0.16.1)的模块时,经常出现DLL load failed的报错,具体截图如下: 解决办法与步骤如下: 由于sklearn的 ...

  5. Java中没有C#的out关键字，但可以通过数组实现类似的效果

    其实传递的就是数组的指针,里面的每一项的值还是那块内存,所以能直接操作里面的值.如果单纯传指定的值,那么里面操作的就是新的一块内存块. 用数组实现的效果如下: class B{ String cnt= ...

  6. mysql 源码 jin-yang.github.io

    https://jin-yang.github.io/post/mysql-group-commit.html

  7. 分布式文件系统 FastDFS 5.0.8 & Linux CentOS 6.7 安装配置

    原文:http://blog.csdn.net/wlwlwlwl015/article/details/52619851 前言 项目中用到文件服务器,有朋友推荐用fastdfs,所以就了解学习了一番, ...

  8. xpath的匹配规则

    starts-with 匹配一个属性开始位置的关键字 contains 匹配一个属性值中包含的字符串 text() 匹配的是显示文本信息,此处也可以用来做定位用 i.e. //input[starts ...

  9. DVBS/S2在数字电视系统中的应用 三 （LNB介绍）

    DVBS/S2在数字电视系统中的应用 三 (LNB介绍) 老谢在前面两篇文章中(例如以下).都有提到LNB这一概念. DVBS/S2在数字电视系统中的应用 一 (DVBS/S2接收系统Block Di ...

  10. SolidEdge 工程图中如何给零件添加纹理或贴图

    格式-检视-勾选纹理   选中一个零件之后,点击格式-面,在纹理选项卡中找到纹理的贴图   最后效果如下图所示,如果不勾选检视纹理,则虽然的确贴图了,但是不显示出来给你看.如果贴图文件没了,也不会显示 ...