如何使用canvas绘制和chart.js使用方法（附案例）
* Canvas
* 基本内容
* 简单来说，HTML5提供的新元素<canvas>
* Canvas在HTML页面提供画布的功能
* 在画布中可以绘制各种图形
* Canvas绘制的图形与HTML页面无关
* 无法通过DOM获取绘制的图形
* 无法为绘制的图形绑定DOM事件
* 只能使用Canvas提供的APL
* Canvas用途
* 在HTML页面中绘制图标（例如柱状图、饼状图等）
* 网页游戏 - flash技术
* 使用HTML5中的Canvas
* 如何使用Canvas
* 在HTML页面中定义<canvas>元素
* 在javascript代码证
* 获取<canvas>元素
* 创建画布对象
* getContext("2d")方法
* 使用Canvas提供的API
* fillRect(x,y,width,height) - 实心矩形
* x和y - 矩形的左上角坐标值
* width - 设置矩形的宽度
* height - 设置矩形的高度
* strokeRect(x,y,width,height) - 空心矩形
* clearRect(x,y,width,height)
* 清除指定区域的矩形
* 设置颜色
* fillstyle - 设置填充颜色
* strokeStyle - 设置描边颜色
* globalAlpha - 设置透明度（0-1）
* 设置渐变
* 线型渐变 - creatLinear Gradient()
* 具有基准线 - 起点（x1,y1）和终点(x2,y2)
* 扇形（射线）渐变 -
* creatRadialGradient(x1,y1,r1,x2,y2,r2)
* 具有柱型（锥形） - 两个圆的面积
* 参数
* x1和y1 - 第一个圆的圆心坐标值
* r1 - 第一个圆的半径
* x2和y2 - 第二个圆的圆心坐标值
* r2 - 第二个圆的半径
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>如何使用Canvas</title> 6 <style type="text/css"> 7 .canvas { 8 width: 500px; 9 height: 300px; 10 background-color: pink; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 16 1. 使用Canvas定义画布 17 <canvas></canvas>元素 - HTML5的画布 18 * 默认宽度和高度 - 300px * 150px 19 * 效果 - 类似于<div></div>元素 20 问题 - 定义<canvas>元素的宽度和高度 21 * css样式方式 - 高宽比绘制出来的是不对的 22 * 属性方式 - 没有任何问题 23 --> 24 <canvas id="canvas" width="500px" height="300px" 25 style="background:pink"></canvas> 26 27 <canvas class="canvas"></canvas> 28 29 <script> 30 //2.获取<canvas>元素 31 var canvas = document.getElementById("canvas"); 32 /* 33 *3. 创建画布对象（根据<canvas>元素） 34 * * getContext()方法 35 * * 返回值，就是画布对象 36 * * 参数 - 表示创建的是2D效果还是3D效果 37 * * 注意 38 * * 参数类型是string类型 39 * * 参数必须是"2d"或"3d"（固定写法） 40 * * 画布（Canvas）对象 41 * * 通过该对象使用Canvas提供的API方法 42 */ 43 var context = canvas.getContext("2d"); 44 //4. 绘制图形（目前了解） 45 context.fillRect(10,10,100,100); 46 </script> 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas绘制彩色案例</title> 6 <style type="text/css"> 7 /*#canvas { 8 width: 100%; 9 height: 600px; 10 }*/ 11 </style> 12 </head> 13 <body> 14 <canvas id="canvas" width="1000px" height="600px"></canvas> 15 <script> 16 var canvas = document.getElementById("canvas"); 17 var context = canvas.getContext("2d"); 18 19 /* 20 * 需求 - 在HTML页面中绘制空心矩形 21 * * 坐标值随机 22 * * x和y的要求 - 不能大于页面宽度和高度 23 * * 宽度和高度随机 24 * * 宽度和高度小于画布的高度和宽度 25 * *颜色随机 26 * * rgd（rgb,green,blue） - 0-255 27 * *每隔1秒，绘制一个空心矩形 28 * 29 */ 30 //1. 获取Canvas元素的宽度和高度 31 var WIDTH = canvas.width; 32 var HEIGHT = canvas.height; 33 //2. 定义一个函数完成逻辑 34 function myRect() { 35 var r = Math.floor(Math.random()*256); 36 var g = Math.floor(Math.random()*256); 37 var b = Math.floor(Math.random()*256); 38 39 40 var x = Math.random()* WIDTH; 41 var y = Math.random()*HEIGHT; 42 43 var width = Math.random()* WIDTH; 44 var height = Math.random()*HEIGHT; 45 46 if((x + width) >= WIDTH ){ 47 x = Math.random()* WIDTH; 48 width = Math.random()* WIDTH; 49 } 50 // while((x + width) >= WIDTH) { 51 // x = Math.random()* WIDTH; 52 // width = Math.random()* WIDTH; 53 // } 54 55 if((y + height) >= HEIGHT){ 56 y = Math.random()*HEIGHT; 57 height = Math.random()*HEIGHT; 58 } 59 60 61 context.strokeStyle = "rgb("+r+","+g+","+b+")"; 62 context.strokeRect(x,y,width,height); 63 } 64 setInterval("myRect",1000); 65 </script> 66 </body> 67 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>11-canvas线型渐变效果</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="500px" height="500px"></canvas> 9 10 <script type="text/javascript"> 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext("2d"); 13 /* 14 * 1.设置线型渐变 15 * *createLinearGradient(x1,y1,x2,y2) 16 * * x1和y1 - 基准线的起点坐标值 17 * * x2和y2 - 基准线的终点坐标值 18 * * 该方法返回线变对象 19 * 20 * 21 */ 22 var grd = 23 context.createLinearGradient(0,0,canvas.width,0); 24 /* 25 * 2. 通过渐变对象，设置渐变颜色 26 * addColorstop(position,color)方法 27 * * position - 设置渐变颜色的位置 28 * * 该值的范围为 0-1 29 * * color - 设置渐变的颜色 30 * 31 */ 32 grd.addColorStop(0,"red"); 33 grd.addColorStop(0.75,"yellow"); 34 grd.addColorStop(0.5,"green"); 35 grd.addColorStop(1,"blue"); 36 /* 37 * 3. 设置填充颜色 - 渐变对象 38 */ 39 context.fillStyle = grd; 40 // 4.绘制矩形 41 context.fillRect(0,0,canvas.width,canvas.height); 42 43 </script> 44 45 46 47 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>扇形渐变效果</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="500px" height="500px"></canvas> 9 <script> 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext('2d'); 12 /* 13 * 1.设置扇形渐变 14 * * creteRadialGradient(x1,y1,r1,x2,y2,r2); 15 * * x1和y1 - 第一个基准圆的圆心坐标值 16 * * r1 - 第一个基准圆的半径 17 * * x2和y2 - 第二个基准圆的圆心坐标 18 * * r2 - 第二个基准圆的半径 19 * * 该方法返回渐变对象 20 */ 21 var grd = 22 context.createRadialGradient(canvas.width/2,canvas.height/2,100,canvas.width/2,canvas.height/2,200); 23 //2. 设置渐变颜色 24 grd.addColorStop(0,"red"); 25 grd.addColorStop(0.5,"yellow"); 26 grd.addColorStop(1,'blue'); 27 //3. 设置填充颜色为渐变 28 context.fillStyle = grd; 29 //4. 绘制矩形 30 context.fillRect(0,0,canvas.width,canvas.height); 31 32 </script> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas绘制文字</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="600px" height="500px"></canvas> 9 <script type="text/javascript"> 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext('2d'); 12 13 14 //绘制文字的基准线 15 context.beginPath(); 16 context.moveTo(100,0); 17 context.lineTo(100,400); 18 context.stroke(); 19 //1.设置文字的相关信息 20 context.font = "bold 48px 宋体"; 21 22 context.fillText("你好",300,200); 23 24 context.textAlign = "left"; 25 26 //2.绘制文字 27 context.fillText("达内",100,50); 28 context.textAlign = "center"; 29 context.fillText("达内",100,100); 30 31 context.textAlign = "right"; 32 context.fillText("达内",100,150); 33 34 //绘制基准线 35 context.beginPath(); 36 context.moveTo(0,300); 37 context.lineTo(500,300); 38 context.stroke(); 39 40 //绘制空心文字 41 context.textBaseline = "top"; 42 context.strokeText("达内",200,300); 43 44 context.textBaseline = "middle"; 45 context.strokeText("达内",300,300); 46 47 context.textBaseline = "hanging"; 48 context.strokeText("达内",400,300); 49 50 context.textBaseline = "alpgabetic"; 51 context.strokeText("达内",500,400); 52 53 </script> 54 55 56 57 58 59 </body> 60 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas设置阴影效果</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="500px" height="500px"></canvas> 9 10 <script type="text/javascript"> 11 12 var canvas = document.getElementById("canvas"); 13 var context = canvas.getContext('2d'); 14 //设置阴影效果 15 context.shadowColor = 'red'; 16 context.shadowOffsetX = 0; 17 context.shadowOffsetY = 10; 18 context.shadowBlur = 5; 19 //绘制文字 20 context.font = "bold 48px 微软雅黑"; 21 context.fillText('达内',200,200); 22 23 context.fillRect(10,10,100,100); 24 context.strokeRect(120,10,100,100); 25 </script> 26 27 28 29 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas创建路径.html</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="600px" height="500px"></canvas> 9 10 <script> 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext("2d"); 13 //1.调用beginPath()方法（必要），表示开始创建路径 14 context.beginPath(); 15 //2. 设置形状 16 context.rect(10,10,100,100); 17 //3.调用closePath() 18 context.fill(); 19 //4. 绘制 20 context.closePath(); 21 22 23 // 利用创建路径绘制空心矩形 24 //问题：是否须要在次调用beginpath(); 25 context.beginPath(); 26 context.rect(10,120,100,100) 27 context.stroke(); 28 29 //使用创建路径绘制实心圆 30 context.beginPath(); 31 /* 32 * arc(x,y,radius,startAngle,endAangle,direction); 33 * *x和y1 - 设置圆形的圆心坐标值 34 * *radius- 设置圆形的半径 35 * *startAngle 和endAngle 36 * *direction - 是顺时针还是逆时针 37 * * boolean值，默认值为false，表示顺时针 38 */ 39 40 41 42 43 context.arc(170,60,50,0,Math.PI*2); 44 context.fill(); 45 46 context.beginPath(); 47 context.arc(170,170,50,0,Math.PI*3/2,false); 48 context.fill(); 49 50 51 //使用创建路径绘制空心圆 52 context.beginPath(); 53 context.arc(280,60,50,0,Math.PI*2); 54 context.stroke(); 55 56 context.beginPath(); 57 context.arc(280,170,50,0,Math.PI*3/2); 58 context.stroke(); 59 60 context.beginPath(); 61 context.arc(280,280,50,0,Math.PI*3/2); 62 //closePath 63 context.closePath(); 64 context.stroke(); 65 </script> 66 </body> 67 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas创建路径经典案例</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="500px" height="600px"></canvas> 9 10 <script type="text/javascript"> 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext('2d'); 13 14 //绘制圆形 15 context.beginPath(); 16 context.arc(200,200,100,0,Math.PI*3/2); 17 context.stroke(); 18 19 //绘制矩形 20 context.beginPath(); 21 context.rect(200,100,100,100); 22 context.stroke(); 23 24 context.clearRect(201,99,100,100); 25 </script> 26 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用创建路径绘制八卦图</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="600px" height="500px"></canvas> 9 10 <script type="text/javascript"> 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext("2d"); 13 14 //1. 绘制空心完整圆形 15 context.beginPath(); 16 context.arc(250,250,200,0,Math.PI*2); 17 context.stroke(); 18 //2. 绘制黑色的实心半圆 19 context.beginPath(); 20 context.arc(250,250,200,Math.PI/2,Math.PI*3/2); 21 context.fill(); 22 //3.绘制一黑一白两个半圆 23 context.fillStyle = "white"; 24 context.beginPath(); 25 context.arc(250,150,100,0,Math.PI*2); 26 context.fill(); 27 28 context.fillStyle ="black"; 29 context.beginPath(); 30 context.arc(250,350,100,0,Math.PI*2); 31 context.fill(); 32 //4. 绘制一黑一白两个小圆 33 context.beginPath(); 34 context.arc(250,150,30,0,Math.PI*2); 35 context.fill(); 36 context.fillStyle = "white"; 37 context.beginPath(); 38 context.arc(250,350,30,0,Math.PI*2); 39 context.fill(); 40 </script> 45 </body> 46 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>绘制线条</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="500px" height="500px"></canvas> 9 <script type="text/javascript"> 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext("2d"); 12 //1. 表示开始创建路径 13 context.beginPath(); 14 //2. 设置直线（折线）的起点坐标值 15 context.moveTo(10,10); 16 //3. 设置直线（折线）的终点（折点））坐标值 17 context.lineTo(100,10); 18 context.lineTo(100,100); 19 context.lineTo(10,100); 20 context.lineTo(10,10) 21 //4. 绘制 - stroke(); 22 context.stroke(); 23 24 context.beginPath(); 25 context.moveTo(200,100); 26 context.lineTo(400,100); 27 context.lineTo(400,400); 28 context.lineTo(200,400); 29 context.lineTo(300,300); 30 context.lineTo(200,100); 31 context.stroke(); 32 </script> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas设置线条</title>
6 </head> 7 <body> 8 <canvas id="canvas" width="500px" height="500px"></canvas> 9 10 <script type="text/javascript"> 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext("2d"); 13 //设置线条 14 context.lineWidth = 10; 15 context.lineCap = "round"; 16 context.lineJoin = "round"; 17 context.miterLimit = 25; 18 //cnntext.lineCap = "butt"; 19 //绘制一条折线 20 context.beginPath(); 21 context.moveTo(100,100); 22 context.lineTo(300,300); 23 context.lineTo(100,50) 24 context.stroke(); 25 26 //绘制空心矩形 27 context.strokeRect(400,200,100,100); 28 </script> 29 </body> 30 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>08-canvas绘制图片</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="900px" height="600px" style="background: pink;"></canvas> 9 <script type="text/javascript"> 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext('2d'); 12 13 //1. 加载一张图片 14 var myimg = new Image(); 15 myimg.src = "../第二天/images/spjt.png"; 16 /*2. 绘制加载的图片 17 * 问题 - 图片并没有出现在canvas画布中 18 * * 原因 19 * * HTML页面加载<canvas>元素 - 画布 20 * * HTML页面加载图片 21 * * 使用drawImage（）绘制图片 22 * * 加载canvas与图片、drawImage()之间没有必然联系要求 23 * * 要求 24 * * 必须先加载canvas元素，在加载图片 25 * * （出问题）必须先加载完毕图片，在执行绘制图片 26 * * 解决 27 * * 图片的onload事件 - 保证图片加载完毕 28 */ 29 myimg.onload = function() { 30 context.drawImage(myimg,10,10,600,300); 31 } 32 </script> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas平铺图片</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="900px" height="600px"></canvas> 9 <script type="text/javascript"> 10 var context = canvas.getContext('2d'); 11 //1. 加载图片 12 var myimg = new Image(); 13 14 myimg.src = "../第二天/images/spjt.png"; 15 myimg.onload = function() { 16 //2. 设置平铺 17 // var ptn = context.createPattern(myimg,"no-repeat"); 18 var ptn = context.createPattern(myimg,"repeat"); 19 //3. 设置颜色为图片平铺 20 context.fillStyle = ptn; 21 //4. 绘制矩形 22 context.fillRect(0,0,canvas.width,canvas.height); 23 } 24 25 </script> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas切割图片</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="500px" height="500px"></canvas> 9 <script type="text/javascript"> 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext('2d'); 12 //绘制图片 13 var myimg = new Image(); 14 myimg.src ="../第二天/images/spjt.png"; 15 myimg.onload = function() { 16 context.drawImage(myimg,0,0,512,384); 17 } 18 //切割图片-矩形 19 //context.beginPath(); 20 //context.rect(100,100,100,100); 21 //context.clip(); 22 //切割图片-圆形 23 context.beginPath(); 24 context.arc(240,100,80,0,Math.PI*2); 25 context.clip(); 26 </script> 27 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas画布方法</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="500px" height="500px"></canvas> 9 <script type="text/javascript"> 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext("2d"); 12 13 //1. 重新定位 14 context.translate(200,100); 15 //2. 缩放 16 context.scale(0.5,0.5); 17 //3.旋转 18 context.rotate(Math.PI/10); 19 //绘制实心矩形图 20 context.fillStyle = "pink"; 21 context.fillRect(0,0,100,50); 22 </script> 23 </body> 24 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <canvas id="canvas" width="500px" height="500px" style="border:solid 1px black"></canvas> 10 <input type="button" name="" id="button" value="开始" /> 11 12 <script type="text/javascript"> 13 var canvas = document.getElementById("canvas"); 14 var context = canvas.getContext("2d"); 15 16 17 var btn = document.getElementById("button"); 18 btn.onclick = function() { 19 //完成螺旋图 20 context.translate(150,50); 21 context.scale(0.95,0.95); 22 23 24 context.fillStyle = "blue"; 25 context.globalAlpha = 0.5; 26 context.fillRect(0,0,100,50); 27 28 29 for(var i = 0; i < 50; i++){ 30 //相对上次定位坐标值 31 context.translate(20,20); 32 33 context.scale(0.95,0.95); 34 context.rotate(Math.PI/15); 35 context.fillRect(0,0,100,50); 36 } 37 38 } 39 40 41 </script> 42 </body> 43 </html>
chart.js使用方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>chart.js使用</title> 6 <!--1.引入chart.js--> 7 <script type="text/javascript" src="Chart.js"></script> 8 </head> 9 <body> 10 <!--2.定义<canvas>元素--> 11 <canvas id="canvas" width="300px" height="300px"></canvas> 12 <script type="text/javascript"> 13 //3. 获取<canvas>元素 14 var canvas = document.getElementById("canvas"); 15 //4. 创建画布对象 16 var context = canvas.getContext("2d"); 17 //5.通过画布对象，创建chart对象 18 var chart = new Chart(context); 19 //6.利用Chart对象，绘制图案 20 /* 21 * pie(data)方法 - 表示绘制饼状图 22 * * data - 设置饼状图的相关数据内容 23 * 数据类型 - array数组类型 24 * 每个元素 - 表示饼状图的一个部分 25 * 每个元素的格式 - boject对象类型 26 { 27 value : 28 color : 29 highlight : 30 label : 31 } 32 * 33 */ 34 var data = [ 35 { 36 value: 300, 37 color:"#F7464A", 38 highlight: "#FF5A5E", 39 label: "Red" 40 }, 41 { 42 value: 50, 43 color: "#46BFBD", 44 highlight: "#5AD3D1", 45 label: "green" 46 }, 47 { 48 value: 100, 49 color: "#FDB45C", 50 highlight: "#FFC870", 51 label: "Yellow" 52 }, 53 { 54 value: 40, 55 color: "#949FB1", 56 highlight: "#A8B3C5", 57 label: "Grey" 58 }, 59 { 60 value: 120, 61 color: "#4D5360", 62 highlight: "#616774", 63 label: "Dark Grey" 64 65 66 } 67 ]; 68 chart.Pie(data); 69 </script> 70 </body> 71 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>chart.js绘制柱状图</title> 6 <script type="text/javascript" src="Chart.js"></script> 7 8 </head> 9 <body> 10 <canvas id="canvas" width="450px" height="600px"></canvas> 11 <script> 12 var canvas = document.getElementById("canvas"); 13 var context = canvas.getContext('2d'); 14 var chart = new Chart(context); 15 Chart.defaults.global.responsive = true; //当你网页改变大小时true一起改变false不改变 16 var data = { 17 labels : ["一月",'二月','三月','四月','五月','六月'], 18 datasets : [ 19 { 20 //填充颜色 21 fillColor : "rgba(220,220,220,0.5)", 22 //描边颜色 23 strokeColor : "rgba(220,220,220,0.8)", 24 //鼠标悬停时填充颜色 25 highlightFill : "rgba(220,220,220,0.75)", 26 //鼠标悬停时描边颜色 27 highlightStroke : "rgba(220,220,220,1", 28 //设置柱状图数据 29 data : 30 [100,200,50,300,500,400], 31 } 32 ] 33 } 34 chart.Bar(data); 35 </script> 36 </body> 37 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>实心圆跟随鼠标运动</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="300px" height="400px" style="background:pink;"></canvas> 9 <script type="text/javascript"> 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext('2d'); 12 var x = 100, y = 100; 13 //思路1 14 // //绘制圆形 15 // context.beginPath();//绘制路径 16 // context.arc(100,100,30,0,Mat.PI*2);//绘制圆形值 17 // context.fill();//填充 18 // /*鼠标跟随事件 - onmousemove事件 19 // * * 无法为绘制的Canvas图形绑定事件 20 // * * 可以将事件绑定在<canvas>元素 21 // */ 22 // canvas.onmousemove = function(event) { 23 // var x = event.offsetX; 24 // var y = event.offsetY; 25 // //重新绘制 26 // context.beginPath();//绘制路径 27 // context.arc(x,y,30,0,Mat.PI*2);//绘制圆形值 28 // context.fill();//填充 29 // } 30 /* 31 * 思路二 32 * 绘制图片 - 当前画布的背景图片 33 * 34 */ 35 var myimg = new Image(); 36 myimg.src = "../第二天/images/spjt.png"; 37 setInterval(function () { 38 context.drawImage(myimg,0,0); 39 //绘制圆形 40 context.beginPath(); 41 context.arc(x,y,30,0,Math.PI*2); 42 context.fill(); 43 },50); 44 /*myimg.onload = function () { 45 context.drawImage(myimg,0,0); 46 //绘制圆形 47 context.beginPath(); 48 context.arc(x,y,30,0,Math.PI*2); 49 context.fill(); 50 } 51 */ 52 canvas.onmousemove = function(event) { 53 x = event.offsetX; 54 y = event.offsetY; 55 } 56 57 </script> 58 59 60 61 </body> 62 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自上向下运动</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="600px" height="500px" style="background: pink;"></canvas> 9 10 <script type="text/javascript"> 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext('2d'); 13 /* 14 * 需求 15 * * 在画布的顶部随机绘制图案 16 * * 水平方向的坐标值随机（不能小于0，不能大于Width） 17 * * 半径范围 - 10-50 18 * * 整体所有圆形自上向下运动 19 * 20 */ 21 var r = Math.random()*40+10; 22 var WIDTH = canvas.width; 23 //最小值 0+r 最大值WIDTH-r 24 var x = Math.random()*WIDTH; 25 if(x < r){ 26 x = r; 27 } 28 if(x > WIDTH-r){ 29 x = WIDTH-r; 30 } 31 context.beginPath();//绘制路劲 32 context.arc(x,-r,r,0,Math.PI*2);//绘制圆形 33 context.fill(); 34 //动态效果 - 作业 35 36 </script> 37 38 39 </body> 40 </html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>13-chart.js使用</title><!--1.引入chart.js--><script type="text/javascript" src="Chart.js"></script></head><body><!--2.定义<canvas>元素--><canvas id="canvas" width="300px" height="300px"></canvas><script type="text/javascript">//3. 获取<canvas>元素var canvas = document.getElementById("canvas");//4. 创建画布对象var context = canvas.getContext("2d");//5.通过画布对象，创建chart对象var chart = new Chart(context);//6.利用Chart对象，绘制图案/* * pie(data)方法 - 表示绘制饼状图 ** data - 设置饼状图的相关数据内容* 数据类型 - array数组类型* 每个元素 - 表示饼状图的一个部分* 每个元素的格式 - boject对象类型{value : color :highlight :label : }* */var data = [{value: 300,color:"#F7464A",highlight: "#FF5A5E",label: "Red"},{value: 50,color: "#46BFBD",highlight: "#5AD3D1",label: "green"},{value: 100,color: "#FDB45C",highlight: "#FFC870",label: "Yellow"},{value: 40,color: "#949FB1",highlight: "#A8B3C5",label: "Grey"},{value: 120,color: "#4D5360",highlight: "#616774",label: "Dark Grey"}];chart.Pie(data);</script></body></html>
