canvas | 易学教程

17-canvas绘制扇形

阅读更多关于 17-canvas绘制扇形

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>17-Canvas绘制扇形</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 oCtx.moveTo(100, 100); 26 oCtx.arc(100, 100, 100, 0, Math.PI/2); 27 oCtx.closePath(); 28 // oCtx.stroke(); 29 oCtx.fill(); 30 </script> 31 </body> 32 <

16-canvas绘制圆弧

阅读更多关于 16-canvas绘制圆弧

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>16-Canvas绘制圆弧</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 /* 22 1.基本概念 23 角度: 一个圆360度, 一个半圆是180度 24 弧度: 一个圆2π, 一个半圆π 25 26 2.角度转换弧度公式: 27 ∵ 180角度 = π弧度 28 ∴ 1角度 = π/180; 29 ∴ 弧度 = 角度 * π/180; 30 90角度 * π/180 = π/2 31 32 3.弧度转换角度公式: 33 ∵ π弧度 = 180角度 34 ∴ 1弧度 = 180/π 35 ∴ 角度 = 弧度 * 180/π 36 π/2 * 180/π = 180/2 = 90度 37 * */ 38 // 1.拿到canvas

10-canva绘制数据点

阅读更多关于 10-canva绘制数据点

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>10-Canvas绘制数据点</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 // 3.定义变量保存小方格的尺寸 26 let gridSize = 50; 27 // 4.拿到canvas的宽高 28 let canvasWidth = oCtx.canvas.width; 29 let canvasHeight = oCtx.canvas.height; 30 // 5

11-canvas绘制折线图

阅读更多关于 11-canvas绘制折线图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>11-Canvas绘制折线图</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 // 3.定义变量保存小方格的尺寸 26 let gridSize = 50; 27 // 4.拿到canvas的宽高 28 let canvasWidth = oCtx.canvas.width; 29 let canvasHeight = oCtx.canvas.height; 30 // 5

06-canvas填充图形颜色

阅读更多关于 06-canvas填充图形颜色

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>06-Canvas填充图形</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="500"></canvas> 20 <script> 21 /* 22 1.stroke 23 绘制已定义的路径 24 25 2.fill 26 填充已定义的路径 27 */ 28 let oCanvas = document.querySelector("canvas"); 29 let oCtx = oCanvas.getContext("2d"); 30 /* 31 oCtx.moveTo(50, 50); 32 oCtx.lineTo(200, 50); 33 oCtx.lineTo(200, 200); 34 oCtx.closePath(); 35 // oCtx.stroke(); 36 oCtx

07-canvas绘制虚线

阅读更多关于 07-canvas绘制虚线

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>07-Canvas虚线</title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="500"></canvas> 20 <script> 21 let oCanvas = document.querySelector("canvas"); 22 let oCtx = oCanvas.getContext("2d"); 23 oCtx.moveTo(100, 100); 24 oCtx.lineTo(400, 100); 25 oCtx.lineWidth = 20; 26 oCtx.strokeStyle = "blue"; 27 // oCtx.setLineDash([5, 20]); 28 oCtx.setLineDash([5, 10, 20]); 29 // console.log(oCtx

08-canvas绘制表格

阅读更多关于 08-canvas绘制表格

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>08-Canvas绘制表格</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 // 3.定义变量保存小方格的尺寸 26 let gridSize = 50; 27 // console.log(oCanvas.offsetWidth); 28 // console.log(oCanvas.offsetHeight); 29 // console.log(oCanvas

09-canvas绘制坐标系

阅读更多关于 09-canvas绘制坐标系

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>09-Canvas绘制坐标系</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 // 3.定义变量保存小方格的尺寸 26 let gridSize = 50; 27 // 4.拿到canvas的宽高 28 let canvasWidth = oCtx.canvas.width; 29 let canvasHeight = oCtx.canvas.height; 30 // 5

HTML5 Canvas标签及基本使用

阅读更多关于 HTML5 Canvas标签及基本使用

< canvas>定义图形基于状态进行绘制的大多数 Canvas 绘图 API 都没有定义在 < canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上 canvas . width canvas . height //指定canvas的宽高 canvas . getContext ( "2d" ) ; //返回绘制的环境 context . moveTo ( 10 , 10 ) //从（10，10）开始画 context . lineTo ( 100 , 100 ) //从（10，10）开始画，画到（100，100） context . stroke ( ) //开始绘制（线条） context . lineWidth = 3 //设置线条的宽度 context . strokeStyle = "#f00" 设置线条的颜色 stroke笔画的意思 context . fillStyle = "rgb(255,0,0)" ；context . fill ( ) //着色，，填充的颜色（颜色块） context . beginPath ( ) ; //定义一个新的路径 context . closePath ( ) ; //用在路径结束，如果绘制的路径不是封闭的则会自动封闭起来，不写closrPath则不会封闭 //从坐标

下载html为doc文件

阅读更多关于下载html为doc文件

方法一：使用jquery.wordexport.js和FileSaver.js jquery.wordexport.js源码 if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") { (function ($) { $.fn.wordExport = function (fileName) { fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export"; var statics = { mhtml: { top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>", head: "