1.Canvas是什么？

简单地说canvas是画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图就是js，

提供简单的二维矢量绘图.

2.步骤：

  • <canvas id="aa">12</canvas> //创建HTML页面，设置画布标签
  • var canvas=document.getElementById("aa");//编写js，获取画布dom对象
  • var ctx=canvas.getContext("2d"); //通过Canvas标签的Dom对象获取上下文
  • ctx.fillStyle="green"; //设置绘制线样式、颜色
  • ctx.fillRect(10,10,100,100); //绘制矩形，或者填充矩形

3.代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>我的网页</title>

 </head>

 <body>

     <h1>我的网页</h1>

     <hr>

     <canvas id="aa">12</canvas>

     <script>

         var canvas=document.getElementById("aa");

         var ctx=canvas.getContext("2d");

         ctx.fillStyle="green";

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

         ctx.strokeRect(120, 0, 100, 100);

         // 设置带透明度的样式

         ctx.fillStyle = "rgba(0,255,0,0.5)";

         ctx.strokeStyle = "rgba(255,0,255,0.5)";

         ctx.fillRect(240,0 , 100, 100);

         ctx.strokeRect(240, 120, 100, 100);

     </script>

 </body>

 </html>

4.效果

5.其他　　

圆弧ctx.arc(x, y, radius, starAngle,endAngle, anticlockwise)

画线ctx.lineTo(100, 100);

线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

线性渐变颜色lg.addColorStop(offset,color)

径向渐变（发散）var rg=ctx.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

径向渐变（发散）颜色rg.addColorStop(offset,color)

Canvas讲解的更多相关文章

  1. 讲解Canvas中的一些重要方法

    Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...

  2. HTML5 canvas globalCompositeOperation绘图类型讲解

    我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的.比如说,它这样受制于图形的绘制顺序.不过,我们可以利用 globalCompositeOperation 属性来改变这些做法.global ...

  3. [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  4. [ html canvas putImageData ] canvas绘图属性 putImageData 属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  5. [ html canvas getImageData Object.data.length ] canvas绘图属性 getImageData Object.data.length 属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  6. html5 Canvas处理图像 实例讲解

    最近在学习canvas,canvas有很强大的图像处理功能,下面写一个我的学习总结: canvas常用功能: 1. 绘制矩形.圆形.曲线.组合图形 2. 绘制文本 3.绘制渐变.变形的图形 4. 图片 ...

  7. Android Paint、Canvas、Matrix使用讲解(一、Paint)

    http://blog.csdn.net/tianjian4592/article/details/44336949 好了,前面主要讲了Animation,Animator 的使用,以及桌面火箭效果和 ...

  8. canvas入门级小游戏《开关灯》思路讲解

    游戏很简单,10行10列布局,每行每列各10盏灯,游戏初始化时随机点亮其中一些灯,点击某盏灯,其上下左右的灯及本身状态反转,如果点击前是灭着的,点击后即点亮,将所有灯全部点亮才算过关.游戏试玩: 下面 ...

  9. HTML5 canvas save()和restore()方法讲解

    我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的.第一步是用默认设置画一个大四方形,然后保存一下状态.改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态.再次改变填充颜色 ...

随机推荐

  1. 札记：android手势识别，MotionEvent

    摘要 本文是手势识别输入事件处理的完整学习记录.内容包括输入事件InputEvent响应方式,触摸事件MotionEvent的概念和使用,触摸事件的动作分类.多点触摸.根据案例和API分析了触摸手势T ...

  2. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  3. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

  4. 如何将VCSA添加到微软域控环境，并且实现微软域账号登陆vCenter

    v:* { } o:* { } w:* { } .shape { } p.msonormal,li.msonormal,div.msonormal { margin: 0cm; margin-bott ...

  5. Velocity笔记--使用Velocity获取动态Web项目名的问题

    以前使用jsp开发的时候,可以通过request很轻松的获取到根项目名,现在换到使用velocity渲染视图,因为已经不依赖servlet,request等一些类的环境,而Web项目的根项目名又不是写 ...

  6. Entity Framework 延伸系列目录

    1.采用MiniProfiler监控EF与.NET MVC项目 2.采用EntityFramework.Extended 对EF进行扩展 3.EntityFramework执行存储过程中遇到的那些坑 ...

  7. Java类变量和成员变量初始化过程

    一.类的初始化 对于类的初始化:类的初始化一般只初始化一次,类的初始化主要是初始化静态成员变量. 类的编译决定了类的初始化过程. 编译器生成的class文件主要对定义在源文件中的类进行了如下的更改: ...

  8. const let,console.log('a',a)跟console.log('a'+a)的区别

    const 创建一个只读的常量 let块级作用域 const let重复赋值都会报错 console.log('a',a) a console.log('a'+a) a2 逗号的值会有空格:用加号的值 ...

  9. 屌丝giser成长记-大学篇

    作为一名屌丝giser的我,刚接触gis专业是2007年的大一,好悲催,当时gis这个专业是被调剂的,我压根都不知道gis为何物,那时候gis冷门的一逼,报名这个专业的寥寥无几.记得那时候得知被调剂到 ...

  10. NYOJ 455

    1.应该交代清楚,参加宴会的人不知道一共有多少顶帽子.假如知道有n顶帽子的话,第一次开灯看见有n-1只,自然就知道自己是第n顶黑帽子,所以应该是这n个人在第一次关灯就打自己脸,不过这么一来就没意思了, ...