上篇文章我们了解了canvas的定义、获取和基础的绘图操作，其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。今天我们来讲讲矩形（Rectangle）和多边形的绘制。矩形的绘制一共有两个口令，分别是ctx.fillRect(x, y, width, height)和ctx.strokeRec...
分类：
Web程序 时间：
2014-08-15 19:37:19
阅读次数：
348
上篇文章我们了解了canvas的定义、获取和基础的绘图操作，其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。今天我们来讲讲矩形（Rectangle）和多边形的绘制。矩形的绘制一共有两个口令，分别是 ctx.fillRect(x, y, width, height) 和 ctx.stroke...
分类：
Web程序 时间：
2014-08-15 19:18:39
阅读次数：
334
arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arc...
分类：
其他好文 时间：
2014-08-15 17:34:29
阅读次数：
243
1 1 var canvas=document.getElementById("canvas"); 2 var cxt=canvas.getContext("2d"); 3 cxt.beginPath(); 4 cxt.moveTo(250,50); 5 cxt.l...
分类：
其他好文 时间：
2014-08-15 14:35:59
阅读次数：
177
1 1 var canvas=document.getElementById("canvas"); 2 var cxt=canvas.getContext('2d'); 3 cxt.lineWidth=10; 4 cxt.beginPath(); 5 cxt.mo...
分类：
其他好文 时间：
2014-08-15 14:33:08
阅读次数：
278
1 var canvas=document.getElementById("canvas"); 2 var cxt=canvas.getContext("2d"); 3 //画一个空心圆 4 cxt.beginPath(); 5 cxt.arc(200,200,50...
分类：
其他好文 时间：
2014-08-15 14:31:28
阅读次数：
204
canvas的方法 save()保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext()返回一个对象,指出访问绘图功能必要的API toDataUPL() 返回canvas图像的URL线条样式的属性和方法 属性: lineCap设置...
分类：
Web程序 时间：
2014-08-15 14:30:18
阅读次数：
260
1 1 var canvas=document.getElementById("canvas"); 2 var cxt=canvas.getContext("2d"); 3 cxt.beginPath(); 4 cxt.rect(100,20,100,100); 5 ...
分类：
其他好文 时间：
2014-08-15 14:28:39
阅读次数：
131
1 var canvas=document.getElementById("canvas"); 2 //设置绘图环境 3 var cxt=canvas.getContext('2d'); 4 //开启新路近 5 cxt.beginPath(); 6 // ...
分类：
其他好文 时间：
2014-08-15 14:26:09
阅读次数：
228
1. 画矩形和写字var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');context.lineWidth = 30;context.font = '24px Helvetica';c...
分类：
Web程序 时间：
2014-08-15 12:36:08
阅读次数：
262
