一、画布的使用

1、首先创建一个画布(canvas)

<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>

2、使用JavaScript来绘制图像

<script>

Var c=document.getElementByID(“myCanvas”)//得到画布

Var ctx=c.getContext(“2d”);//得到画笔

Cxt.fillStyle=”#FF0000”;//填充颜色

Cxt.fillRect(0,0,150,75);//规定顶点

</script>

3、Canvas - 路径

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

二、画图举例

1、画直线:

定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

2、画圆

使用 arc() 方法 绘制一个圆:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

3、画文本

使用 canvas 绘制文本,重要的属性和方法如下:

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

(1)、使用 fillText(),使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心):

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

(2)、使用 strokeText(),使用 "Arial" 字体在画布上绘制一个高 30px 的文字(空心):

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

4、渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变:

  • createLinearGradient(x,y,x1,y1)
    - 创建线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1)
    - 创建一个径向/圆渐变

当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.

使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线

(1)、使用
createLinearGradient(),创建一个线性渐变。使用渐变填充矩形:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);//规定渐变的起始坐标
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

(2)、使用
createRadialGradient(),创建一个径向/圆渐变。使用渐变填充矩形:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

5、Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)

var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var
img=document.getElementById("scream");//得到id为scream的image,并定义为变量img
ctx.drawImage(img,10,10);//以画布坐标(10,10)为开始,将图片放置画布上。

最新文章

  1. 一种面向对象的TCP/IP中间件
  2. 关于SIGSEGV错误及处理方法(转)
  3. oracle TBL$OR$IDX$PART$NUM BUG案例处理过程
  4. sharepoint 弹出窗口
  5. 关于Java函数传参以及参数在函数内部改变的问题——JAVA值传递与引用最浅显的说明!
  6. MySQL查询昨天、今天、7天、近30天、本月、上一月数据
  7. win7 安装Redis
  8. winform中关于panel中滚动条和键盘事件几点体会
  9. ASP.NET MVC 应用程序的安全性,看一眼你就会了
  10. Python爬虫! 单爬,批量爬,这都不是事!
  11. OO第一单元表达式求导作业总结
  12. MAC环境配置
  13. PHPStorm配置Xdebug官方文档
  14. qemu对虚拟机的内存管理(一)
  15. eclipse配置Servlet连接Mysql要注意的几个地方
  16. (转)Sphinx中文分词安装配置及API调用
  17. 《mysql从入门到精通》提高
  18. 常用数据结构及算法C#/Java实现
  19. 【剑指offer】两个链表的第一个公共结点
  20. walle自动部署增量上线

热门文章

  1. 【转】Unicode(UTF-8, UTF-16)令人混淆的概念
  2. JAVA- 成员变量与局部变量的区别
  3. 通过阿里云域名动态解析 IP 地址
  4. 无言以队Alpha阶段项目复审
  5. hdu-5784 How Many Triangles(计算几何+极角排序)
  6. bzoj 3232 圈地游戏——0/1分数规划(或网络流)
  7. KCF+Opencv3.0+Cmake+Win10 测试
  8. 开源LTE代码分析
  9. 一 Kubernetes介绍
  10. python find()用法