玩转html5canvas画图

时间：2018-11-26

<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

本文来自织梦

温馨提示：以下所有实验请使用最新版的opera

织梦内容管理系统

基本知识 内容来自dedecms

context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法是

织梦好，好织梦

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

dedecms.com

也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3d服务。

内容来自dedecms

dedecms.com

canvas元素绘制图像的时候有两种方法，分别是本文来自织梦

context.fill()//填充织梦内容管理系统

context.stroke()//绘制边框 dedecms.com

style:在进行图形绘制前，要设置好绘图的样式

本文来自织梦

context.fillStyle//填充的样式

织梦内容管理系统

context.strokeStyle//边框样式织梦内容管理系统

context.lineWidth//图形边框宽度本文来自织梦

颜色的表示方式:

织梦好，好织梦

直接用颜色名称:"red" "green" "blue" dedecms.com

十六进制颜色值: "#EEEEFF" copyright dedecms

rgb(1-255,1-255,1-255) dedecms.com

rgba(1-255,1-255,1-255,透明度)

织梦内容管理系统

和GDI是如此的相像，所以用过GDI的朋友应该很快就能上手

本文来自织梦

绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

织梦内容管理系统

x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，后面写到变形的时候你就懂了，现在暂时不用关系）织梦好，好织梦

y:矩形起点纵坐标

织梦内容管理系统

width:矩形长度 dedecms.com

height:矩形高度 dedecms.com

玩转html5canvas画图本文来自织梦

玩转html5canvas画图

织梦内容管理系统

View Code

1 function draw21(id) { 2 var canvas = document.getElementById(id) 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext("2d"); 6 //实践表明在不设施fillStyle下的默认fillStyle=black 7 context.fillRect(0, 0, 100, 100); 8 //实践表明在不设施strokeStyle下的默认strokeStyle=black 9 context.strokeRect(120, 0, 100, 100); 10 11 //设置纯色 12 context.fillStyle = "red"; 13 context.strokeStyle = "blue"; 14 context.fillRect(0, 120, 100, 100); 15 context.strokeRect(120, 120, 100, 100); 16 17 //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明 18 context.fillStyle = "rgba(255,0,0,0.2)"; 19 context.strokeStyle = "rgba(255,0,0,0.2)"; 20 context.fillRect(240,0 , 100, 100); 21 context.strokeRect(240, 120, 100, 100); 22 }

本文来自织梦

内容来自dedecms

玩转html5canvas画图

内容来自dedecms

清除矩形区域 context.clearRect(x,y,width,height)

织梦内容管理系统

x:清除矩形起点横坐标

本文来自织梦

y:清除矩形起点纵坐标

织梦内容管理系统

width:清除矩形长度内容来自dedecms

height:清除矩形高度织梦好，好织梦

玩转html5canvas画图本文来自织梦

View Code

1 function draw22(id) { 2 var canvas = document.getElementById(id) 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext("2d"); 6 //实践表明在不设施fillStyle下的默认fillStyle=black 7 context.fillRect(0, 0, 100, 100); 8 //实践表明在不设施strokeStyle下的默认strokeStyle=black 9 context.strokeRect(120, 0, 100, 100); 10 11 //设置纯色 12 context.fillStyle = "red"; 13 context.strokeStyle = "blue"; 14 context.fillRect(0, 120, 100, 100); 15 context.strokeRect(120, 120, 100, 100); 16 17 //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明 18 context.fillStyle = "rgba(255,0,0,0.2)"; 19 context.strokeStyle = "rgba(255,0,0,0.2)"; 20 context.fillRect(240, 0, 100, 100); 21 context.strokeRect(240, 120, 100, 100); 22 context.clearRect(50, 50, 240, 120); 23 } 织梦内容管理系统