使用方法<canvas width = " " height = " " id = "draw" //使用canvas标签布置画布，其width和height也是标签，不能在style内书写
<script>
var draw = document.getElementById(" draw ");//获取标签
var bord = draw.getContext(" 2d "); //通过标签获取画布，再通过画布调用绘制方法
常用绘制方法颜色、样式和阴影： fillStyle 填充绘画的颜色、渐变或模式
bord.fillStyle = " "; strokeStyle 设置笔触的颜色、渐变或模式
bord.strokeStyle = " "; shadowColor 设置阴影颜色
bord.shadowColor = " black "; shacowBlur 设置阴影模糊级别
bord.shadowBlur = 10 ; shadowOffsetX 设置阴影的水平偏移距离
bord.shadowOffsetX = 20; shadowOffsetY 设置阴影的垂直偏移距离
bord.shadowOffsetY = 20;
颜色渐变： createLinearGradient 创建线性颜色渐变
var changecolor1 = bord.createLinearGradient(x0,y0,x1,y1);
x0,y0:渐变开始点的坐标
x1,y1:渐变结束点的坐标 createPattern 在指定方向上重复指定的元素（指定平铺）
var changeimg = bord.createPattern(参数1,"参数2");
参数1：需要重复的元素
参数2：重复方式： repeat：全铺 repeat-X:水平平铺 repeat-Y:垂直平铺 no-repeat：不平铺
createRadialGradient 创建放射性渐变
var changecolor2 = bord.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0,y0:渐变开始的圆圆心坐标
r0：渐变开始的圆的半径
x1,y1:渐变结束的圆圆心坐标
r1：渐变结束圆的半径 addColorStop 规定渐变对象中的颜色和停止位置
changeColor1.addColorStop(参数1，参数2);
参数1：渐变的位置（0~1之间的值）
参数2：渐变的颜色
bord.fillStyle = changecolor1;最后使用创建的变量
线条样式： lineCap：设置线条末端样式
bord.lineCap = "butt添加平直边缘(默认)/round添加圆帽/square添加方帽 lineJoin：设置边角样式
board.lineJoin = "bevel切角/round钝角/miter尖角(默认)"; lineWidth：设置线宽(单位为px）
bord.lineWidth = 10; miterLimit：设置斜切最大长度(仅在lineJoin为miter时生效，超出规定长度部分切角)
bord.miterLimit = 4;
矩形: rect：创建矩形
bord.rect(x , y , width , height); bord.stroke( );
s,y为起始位置的坐标(矩形的左上角)
width、height为矩形的宽高 fillRect：创建空矩形（参数与rect相同，需要使用fillStyle来填充）
bord.rect( x , y , width , height ); strokeRect：创建无填充矩形(参数与rect相同，需要使用strokeStyle来设置填充色)
bord.strokeRect( x , y , width , height); clearRect：清空指定矩形范围内的像素
bord.clearRect( x , y , width , height );
字体： font：设置文本
bord.font = "字体大小 字体内容";
例:bord.font="40px 这是一段文字"; textAlign：设置垂直文本对齐方式
bord.textAlign = "start在指定位置开始/end在指定位置结束/center中心在指定位置/left居左/right居右" textBaseline：设置水平文本对齐方式
bord.textBaseline = "bottom文本框底部/top文本框顶部/middle居中/alphabetic文字底部/hanging文字顶部" fillText：设置被填充字体
bord.fittText = ( "文本内容" , x , y );x,y：文本的起始位置坐标 strokeText： 设置无填充字体(空心字)
bord.strokeText = ( "文本内容" , x , y );
路径： fill：填充当前的图像/路径（若路径未闭合会默认将路径首尾相连）
bord.fill( ); stroke：绘出定义好的路径（可以通过strokeStyle来设置绘制的颜色）
bord.stroke( ); beginPath：开始新的路径/重复当前路径
bord.beginPatn( ); moveTo：将路径移动到画布的指定点(定位起点)
bord.moveTo( x , y ); closePath：将当前路径首尾相连
bord.closePath( ); lineTo： 创建一个新的点并将其与之前最后指定点相连(绘制路径)
bord.lineTo( x , y ); clip：显示剪切的指定区域
bord.clip( ); scale：缩放当前绘图
bord.scale( x , y ); rotate：旋转当前绘图
bord.rotate(所需旋转角度*Math.PI/180); translate：将画布的左上角移动到指定位置后再次绘制
bord.translate( x ,y );
绘制流程：bord.beginPath( ); //开始绘制
bord.moveTo( x , y ); //设置起点
bord.lineTo( x , y ); //设置路径
........
bord.closePath( ); //闭合路径
bord.lineWidth = x ; //设置线宽
bord.strokeStyle = " "; //设置连线颜色
bord.stroke( ); //结束绘制（样式填充）
bord.beginPath( ); //再次绘制
设置格式会设置全局，直至再次设置替换之前的设置
echarts表格绘制echarts是基于canvas的插件，可以通过填写数据来由代码自动生成表格
可以快速生成表格，但是对于出现的错误无法准确修改 <script src = " echarts.min.js></script> //引入echarts文件
<body>
<div id = "echart"></div> //准备存放echarts的DOM容器
<script>
var myChart = echart.init(document,.getElementById("echart")); //基于DOM容器初始化echart实例（将该元素设置为echart实例）
var option = { }; //准备图表数据
myChart.setOption(option); //将数据放入echart实例中
</script>
</body>
|
