HTML5
文章平均质量分 63
花2不谢
热爱开发,乐于分享、
展开
-
HTML5中canvas画图之绘制路径
刚开始认真学习H5,虽然以前大概看过H5的教程,但是都是属于空看,一直没有认真练习,所以打算从现在开始来认真练习。下面的代码实现的功能是绘制一个三角形。代码比较简单。 利用路径绘制一个三角形 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.be原创 2016-06-10 17:11:36 · 4076 阅读 · 0 评论 -
HTML5中canvas画图之根据触摸点画三角形
上一篇博文中说了利用canvas画固定的三角形,现在来试下触摸屏幕,然后根据触摸点画三角形。每触摸一下屏幕就画一个点。刚刚我醉死了,绘制路径的时候竟然把后面的lineTo写成了moveTo,检查了代码很久也没有解决,后来才发现。其实现在还有一点没有解决,就是那个根据屏幕自动设置canvas画布的宽度,也就是自适应。查资料也没有看到,网上的那些方法试了下还是没有解决。望知道的朋友说下。不甚感激!原创 2016-06-10 18:52:57 · 3237 阅读 · 0 评论 -
HTML5中canvas画图之画圆形
利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径,开始角度,结束角度,是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线。代码如下: html5圆形 window.addEventListener("load",function(){ //canvas的2d上下文 var ctx=document.get原创 2016-06-10 21:11:53 · 8715 阅读 · 0 评论 -
HTML5中canvas画图之画矩形和矩形掏空
rect方法用于绘制矩形(长方形)。其语法如下:context.rect(x,y,高度,宽度);绘制代码如下: 绘制矩形 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //绘制 ctx.fillStyle="#ff00000"; ct原创 2016-06-10 21:46:25 · 11373 阅读 · 0 评论 -
HTML5中canvas画图之绘制方格图
下一篇博文是准备绘制折线数据图的,这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单,只要在canvas上绘制一系列的横线和竖线即可。下面是具体代码: 绘制方格图 //获取上下文 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2原创 2016-06-11 17:46:47 · 21855 阅读 · 1 评论 -
HTML5中canvas画图之绘制数据图表
上一篇博文绘制了一个方格图,现在来绘制一个数据图表。实现的效果如下:实现代码如下: 数据图表 //定义图表数据 var uriage=[80,92,101,110,68,50,45,90,74,68,98,103]; drawChart(uriage); //绘制折线数据图表的函数 function drawChart(data){原创 2016-06-11 22:38:37 · 5802 阅读 · 0 评论