随笔分类 -  HTML5-Canvas

HTML5之canvas 钟表基础教程
摘要：1 2 3 4 5 6 7 8 9 113 114 115 阅读全文
posted @ 2016-09-06 17:04 李大白程序员 阅读(382) 评论(0) 推荐(0)
HTML5之canvas 9绘制图片 图片平铺 图片裁剪
摘要：绘制图片 Var image=new Image(); image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg”; image.onload=function() 阅读全文
posted @ 2016-09-06 13:13 李大白程序员 阅读(2275) 评论(0) 推荐(0)
HTML之canvas 8 绘制阴影-绘制文字
摘要：绘制阴影 Context.shadowOffetX:阴影横向位移量 Context.shadowOffetY:阴影纵向位移量 Context.shadowColor:阴影颜色 Context.shadowBlur阴影的模糊范围 绘制文字 Context.fillStyle=’#00F’; Conte 阅读全文
posted @ 2016-09-06 13:10 李大白程序员 阅读(1612) 评论(0) 推荐(0)
HTML5之canvas 7画布旋转
摘要：1 2 3 4 画布旋转 5 6 7 8 9 10 30 31 阅读全文
posted @ 2016-09-06 13:06 李大白程序员 阅读(2700) 评论(0) 推荐(0)
HTML5之canvas 6 绘制渐变图形
摘要：线性渐变 Var grd=context.createLinearGradient(xStart,yStart,xEnd,yEnd) （xStart,yStart）起点，（xEnd,yEnd）终点 grd.addColorStop(offset,color); offset范围是0~1之间的浮点数， 阅读全文
posted @ 2016-09-06 13:04 李大白程序员 阅读(2067) 评论(0) 推荐(0)
HTML5之canvas 4 绘制曲线
摘要：一、圆弧 (x0,y0)当前坐标点，（x1,y1）控制点坐标，（x2,y2）圆弧终点坐标 Context.arcTo(x1,y1,x2,y2,radiusX) 二、二次贝塞尔曲线 开始点：moveTo(20,20) 控制点 1：quadraticCurveTo(20,100,200,20) 结束点： 阅读全文
posted @ 2016-09-06 11:19 李大白程序员 阅读(726) 评论(0) 推荐(0)
HTML5之canvas 3 绘制直线
摘要：Context.moveTo(20,20); Context.lineTo(20,200); Context.lineWidth=10; Context.lineCap=”round”; Context.lineJoin=”round”; Context.stroke(); Context.setL 阅读全文
posted @ 2016-09-06 11:14 李大白程序员 阅读(672) 评论(0) 推荐(0)
HTML5之canvas-2圆 椭圆
摘要：Context.beginPath(); Context.arc(x,y,radius,startAngle,endAngle,anticlockwise);(for循环圆心、半径) Context.closePath(); Context.fillStyle=’rgba(255,0,0,0.25) 阅读全文
posted @ 2016-09-05 22:46 李大白程序员 阅读(3304) 评论(0) 推荐(0)
HTML5之canvas-1画布矩形
摘要：绘制步骤 获取canvas对象 var oCanvas = document.getElementById("canvas"); 取得上下文context var context = oCanvas.getContext("2d"); 绘制图形 根据需求选择方法 绘制长方形/边框/填充色彩 Cont 阅读全文
posted @ 2016-09-05 22:44 李大白程序员 阅读(606) 评论(0) 推荐(0)