Trip to Canvas(1)

昨天看到介绍svg和vml的文章，虽然我的js不咋地，我还是忍住不去找资料学习了一把，下面就简单帮自己总结下吧，也希望对自己和看到的朋友都有帮助。
先看一个简单的例子
<head> </head> <body> <canvas id="square" width="20px" height="20px"></canvas> <canvas id="circle" width="20px" height="20px"></canvas> </body>

部分方法说明：

CanvasRenderingContext2D Canvas.getContext(contextID)
使用返回值对象可以对canvas进行绘制

void CanvasRenderingContext2D.arc(float x,float y, float r,float startAngle, endangle, boolean counterclockwise)
使用第一二个参数为原点第三个参数为半径第四第五为开始结束角度按照最后个参数顺或逆时针绘制圆弧

void CanvasRenderingContext2D.beginPath()
丢弃当前定义的路径并开始一条心的路径

void CanvasRenderingContext2D.closePath()
如果画布当前路径是打开的就添加一条线条连接当前点和子路径起点来关闭

void CanvasRenderingContext2D.bezierCurveTo()
为当前路径添加一个三次贝塞尔曲线

void CanvasRenderingContext2D.clip()
使用当前路径作为连续绘制操作的剪切区域

void CanvasRenderingContext2D.fill()
使用fillStyle属性所指定的颜色渐变或模式来绘制当前路径的内部

......
好，基本明白了上面的内容后就可以对需求作进一步扩展了，现在的需求是画一个简单的饼图，如果需求简单，那么在前台完成时最好不过了，我不在需要下面这样的代码了：
```
 
```
如果数据源并非database，并且固定，只是一个时期的统计，那么拿前台来画图吧,代码如下

应该没什么不合适的吧，虽然我自己也没有实际项目应用过 body {padding:0;margin:0;}
上面的例子都只在firefox等下有效，IE并不支持，但是没关系，可以从这里找到对IE的支持, 并且提供了一些十分不错的例子

转载于:https://www.cnblogs.com/whoseyourlady/archive/2009/10/13/1582665.html

Trip to Canvas(1)相关推荐

干货 | 提升50分，Trip.com 机票基于 PageSpeed 的前端性能优化实践
作者简介 Patrick,携程资深前端开发工程师,专注于前端工程化和性能优化. 前言网站性能对于用户体验.转化率和流失率.SEO 排名等至关重要,Trip.com 主要用户来自海外,对网站访问性能有 ...
干货 | React 中的 Canvas 动画
作者简介掺水的酱油,携程软件技术专家,关注大前端及移动端相关技术. 移动端硬件性能越来越好的今天,页面的交互也越来越丰富,Web 体验在不断向原生应用靠拢,加入了越来越多的手势与动画.除了常见的 C ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
画布Canvas的使用
canvas.drawText();//画文本 canvas.drawArc();//画弧 canvas.drawCircle();//画圆 canvas.drawBitmap(); canvas.d ...
Android 自定义View Canvas —— Bitmap
Bitmap 绘制图片常用的方法有一下几种 (1) drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint ...
Android 自定义View —— Canvas
上一篇在android 自定义view Paint 里面说了几种常见的Point 属性绘制图形的时候下面总有一个canvas ,Canvas 是是画布上面可以绘制点,线,正方形,圆,等等,需要和 ...
android Canvas 最基础知识总结
学习Canvas 要先学习view 知识,这样才好学习第一步创建一个方法让它继承 View 如下图然后快捷键ait+/ 生成构造方法, 用来初始化View ,比如自定一个一些init()方法, ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
从0到1 html5 canvas,Html5 Canvas学习之路（五）
Canvas 图像(上) Canvas 图像API可以加载图像数据,然后直接将图像应用到画布上.还可以裁切.拼贴图像数据,以显示用户需要的部分.此外,Canvas还提供了像素数据的存储功能,这样就能对 ...
POJ-1041 John's trip
写的时候思路很混乱,反复调试交了一发过了,后来才想清楚为啥首先直接根据街道的值来排序从小到大排序,然后dfs一下就能得到答案,但是问题在于自己对于跑dfs理解不深出现了问题, 1.从小到大排序 2. ...

Trip to Canvas(1)

Trip to Canvas(1)相关推荐

最新文章

热门文章