绘制矩形:

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. SelectOnCheck

    1.checkOnSelect 如果为true,当用户点击行的时候该复选框就会被选中或取消选中. 如果为false,当用户仅在点击该复选框的时候才会呗选中或取消. 2.selectOnCheck 如果 ...

  2. .Net 数据缓存浅析

    目录 1场景出发 1.1数据请求 1.2优化改进 2缓存 3缓存进阶 3.1缓存清除 3.2有效性 3.3线程安全 4适用场景和优劣 4.1适用场景 4.2优劣 5结语 1场景出发 1.1数据请求 小 ...

  3. Ubuntu 12.04 Openssh 安装过程

    1.输入 apt-get install openssh-server 注意 出现依赖 需要使用 查看依赖是否需要,如果不需要可以直接删除,sudo apt-get remove XXXX 或者sud ...

  4. artemplate模板

    artTemplate 介绍 最近使用了一款模板,学习成本比较低,性能也不错.觉得很好用,所以推荐给大家. artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了 ...

  5. deepin获取root权限

    ctrk+alt+t 打开终端 输入 sudo passwd root mywork@mywork-PC:~$ sudo passwd root[sudo] mywork 的密码: [sudo] 输入 ...

  6. struts2 Convention插件好处及使用

    现在JAVA开发都流行SSH.而很大部分公司也使用了struts2进行开发..因为struts2提供了很多插件和标签方便使用..在之前开发过程中总发现使用了struts2会出现很多相应的配合文件.如果 ...

  7. mysql主从报错截图

    1.首先确认报错的binlog和last event. 2.然后去主的机器上查看该报错的内容和报错的的位置,如果是结尾报错的,可以直接从新的binlog进行同步. #/mysql/logs# ../b ...

  8. 微信小程序下可以使用的MD5以及AES加密(通用)

    两段代码都来自网络 ,在小程序下的加解密结果与CS/BS等算出的结果都一致,支持汉字. 一.MD5: var rotateLeft = function (lValue, iShiftBits) { ...

  9. BZOJ 1801--中国象棋(DP)

    1801: [Ahoi2009]chess 中国象棋 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1995  Solved: 1160[Submit] ...

  10. php使用xa规范实现分布式事务处理

    具体实例如下,对数据表进行插入和删除操作,两个操作都成功才会修改数据表,否则数据表不变. <?php class connDb{ private static $host = 'jxq-off- ...