绘制矩形：

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <style type="text/css">

         #myCanvas{ border: 1px dotted #aaaaaa; padding:10px; }

        </style>

    </head>

    <body>

        <canvas id="myCanvas" width="300" height="200"> </canvas>

        <script>

        var c = document.getElementById("myCanvas");

        var cxt=c.getContext("2d");

        cxt.fillStyle="#FF0000";

        cxt.fillRect(10,10,150,100);

        </script>

    </body>

</html>

绘制圆形：

创建圆形路径时需要用到对象的arc方法，方法定义如：XXX.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x为圆形起点的横坐标，y为圆形起点的纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise是否按顺时针方向进行绘制。

XXX.beginPath() 创建路径，XXX.closePath() 结束路径，然后XXX.fill() 渲染即可。

<script>

        var c = document.getElementById("myCanvas");

        var cxt=c.getContext("2d");

        cxt.fillStyle="#ff0000";

        cxt.beginPath();

        cxt.arc(50,50,30,0,Math.PI*2,true);

        cxt.closePath();

        cxt.fill();

</script>

绘制线条形：

moveTox,y)指定从何处(x,y)开始，lineTo指定在何处结束，来绘制一条线：

然后 调用stroke()实现绘制。

<script>

        var c = document.getElementById("myCanvas");

        var cxt=c.getContext("2d");

        cxt.moveTo(20,20);

        cxt.lineTo(40,90);

        cxt.lineTo(80,70);

        cxt.lineTo(130,90);

        cxt.stroke();

</script>

绘制渐变效果：

使用您指定的颜色来绘制渐变背景，跟绘制普通矩形差不多，只是fillStyle的值为渐变色了而已。

线性渐变：

方法 createLinearGradient(0,0,150,100); 指定了创建线性渐变色范围

方法 grd.addColorStop(0,"#ff0000");
  grd.addColorStop(1,"#00ff00"); 为渐变色指定渐变“开始与结束”

假如你想实现一个上下的线性渐变的效果，那么你应该在调用createLinearGradient(x0,y0,x1,y1) 创建渐变的时候保证点（x0,y0),点(x1,y1)连成的直线为竖直直线，也就是x0=x1。

当然你也可以实现对角线渐变的效果，只要(x0,y0) (x1,y1)组成一条对角线就可以了。

创建上下渐变和对角线渐变可以这样来：

createLinearGradient(0,0,0,300);    // 创建上下渐变

createLinearGradient(10,10,300,300);    // 创建对角线渐变

<script>

        var c = document.getElementById("myCanvas");

        var cxt=c.getContext("2d");

        var grd = cxt.createLinearGradient(0,0,150,100);

        grd.addColorStop(0,"#ff0000");

        grd.addColorStop(1,"#00ff00");

        cxt.fillStyle = grd;

        cxt.fillRect(0,0,150,70);

</script>

径向渐变：

createRadialGradient(x0,y0,r0,x1,y1,r1)

创建一个沿两个圆之间的锥面绘制渐变。前三个参数代表一个圆心为（x0,y0）半径为r0的开始圆，后三个参数代表圆心为（x1,y1）半径为r1的结束圆。

比如 var grd = cxt.createRadialGradient(100,100,30,100,100,70)

就创建了一个由圆心（100,100）半径为30的圆 ---》 圆心（100,100)半径为70的圆  的渐变效果。

Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果的更多相关文章

  1. canvas 绘制 矩形 圆形

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <tit ...

  2. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

  4. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  5. html5 canvas绘制矩形和圆形

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. canvas 绘制矩形

    XXX(x,y,width,height)   x矩形左上角x坐标                                   y矩形左上角y坐标                       ...

  7. vue下canvas绘制矩形

    起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...

  8. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  9. canvas绘制简单图形

    canvas绘图篇: canvas绘制矩形: <!DOCTYPE html> <html> <head lang="en"> <meta ...

随机推荐

  1. 编译Hadoop1.0.2历程和解决问题记录

    1.安装eclipse3.6.2, 废止3.7, 这个有很多问题 2.安装eclipse插件ivy You can install Apache IvyDE plugins from the IvyD ...

  2. R语言中Fisher判别的使用方法

    最近编写了Fisher判别的相关代码时,需要与已有软件比照结果以确定自己代码的正确性,于是找到了安装方便且免费的R.这里把R中进行Fisher判别的方法记录下来. 1. 判别分析与Fisher判别 不 ...

  3. Unity&C# SingerMonoManager泛型单例

    管理各种管理器 ///为什么需要单例 ///单例模式核心在于对于某个单例类,在系统中同时只存在唯一一个实例,并且该实例容易被外界所访问: ///避免创建过多的对象,意味着在内存中,只存在一个实例,减少 ...

  4. Exp5 MSF基础应用 20164323段钊阳

    网络对抗技术 20164323 Exp5 MSF基础应用 靶机 ip:192.168.1.229 kali ip:192.168.1.216 exploit选取 主动攻击:ms17_010_psexe ...

  5. 2018-2019-2 20165219《网络对抗技术》Exp2 后门原理与实践

    2018-2019-2 20165219<网络对抗技术>Exp2 后门原理与实践 实验内容 使用netcat获取主机操作Shell,cron启动 使用Socat获取主机操作Shell, 任 ...

  6. Code Chef IMPO（计算几何+扫描线+积分）

    题面 传送门 前置芝士 扫描线,积分求面积 题解 我怎么老是忘了积分可以求面积-- 首先,这两个投影的最小的\(x\)坐标和最大的\(x\)坐标必须相等,否则肯定无解 我们考虑一种方法,枚举\(x\) ...

  7. [Objective-C语言教程]指针（15）

    Objective-C中的指针简单易学.使用指针可以更轻松地执行某些Objective-C编程任务,并且在不使用指针的情况下无法执行其他任务(如动态内存分配). 所以有必要学习指向成为一个完美的Obj ...

  8. SpringAOP的应用实例与总结

    一:AOP的背景 面试的时候面试官让我解释一下什么是AOP,当时不懂,在路上就查了,AOP:面向切面的编程技术,困惑了,JAVA是OOP:面向对象的编程技术.那么自己就立刻查了几个为题:1.什么是面向 ...

  9. Python 资源大全

    我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列表,内容包括:Web框架.网络 ...

  10. PlistBuddy简单使用

    PlistBuddy简单使用 由于PlistBuddy并不在Mac默认的Path里,所以我们得通过绝对路径来引用这个工具: 查看帮助 /usr/libexec/PlistBuddy --help 下面 ...