canvas基础[一]探究出初中数学知识

何时用SVG何时用canvas SVG

矢量图,视觉清晰,文件小

<svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> <style> circle { fill: blue; animation: pulse 2s alternate infinite; } @keyframes pulse { 100% { r: 30; } } </style> <script> document.querySelector('circle').addEventListener('click', e => { e.target.style.fill = "red"; }); </script> </svg>

关键可以放在一起玩

Canvas

是javascript绘图API

大佬提出来的想法是:

SVG是默认选择,画布是备份,简单的说当你不能使用SVG时候才使用canvas

canvas 元素

参考资料

<canvas></canvas> 渲染上下文 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');

编写一个基本骨架

<style> #canvas{ border:1px solid #ccc; } </style> <canvas></canvas> 绘制矩形

fillRect(x, y, width, height)

绘制一个填充的矩形

strokeRect(x, y, width, height)

绘制一个矩形的边框

clearRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明。

案例

let canvas = document.querySelector('#canvas') let ctx = canvas.getContext('2d') // 填充 ctx.fillRect(10,10,80,80) // 删除部分 ctx.clearRect(10,10,20,20) // 填充边框的矩形 ctx.strokeRect(10,10,10,10) 绘制路径

创建路径起始点

画图命令绘制路径

路径闭合

路径生成后,通过描边或填充路径来渲染图形

deginpath()

新建一条路径

closePath()

闭合路径

stroke()

通过线条绘制图形轮廓

fill()

通过填充路径绘制成实心的图形

案例

绘制一个三角形 let ctx = canvas.getContext('2d') ctx.beginPath() ctx.moveTo(50, 50)// 点 ctx.lineTo(50, 100)// 直线 ctx.lineTo(130, 100)// ctx.fill()

MoveTo(x,y)

将笔触移动到指定的坐标x以及y上

lineTo(x, y)

绘制一条从当前位置到指定x以及y位置的直线。

// 描边三角形 ctx.beginPath() ctx.moveTo(50, 50)// 点 ctx.lineTo(50, 100)// 直线 ctx.lineTo(130, 100)// ctx.closePath() ctx.stroke()

lineWidth 行宽

strokeStyle 边框的颜色

ctx.lineWidth=5 ctx.strokeStyle='red'

lineCap 线头

butt 默认

round 半圆形

square 移动到末端

context.lineCap = 'butt'; context.lineCap = 'round'; context.lineCap = 'square';

lineJoin 线连接

bevel 斜角

round 圆角

square 默认

ctx.lineJoin = "bevel"; ctx.lineJoin = "round"; 默认 "square" 圆弧

arc()

度数转为弧度公式

度数*Math.PI/180

方法

arc(x,y,radius,startAngle,endAngle,direction)

画一个以（x,y)为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束,direction方向true顺时针,false逆时针,默认顺时针true

用弧度画一个圆

let ctx = canvas.getContext('2d') ctx.beginPath() ctx.moveTo(250, 250)// 点 ctx.arc(250,250,100,0,2 * Math.PI,) ctx.closePath() ctx.stroke()

我们要记住开始的弧度和结束的弧度记住上面的公式,一个圆是2*Math.PI

所以半圆是Math.PI

ctx.arc(250,250,100,1/3*Math.PI,2 * Math.PI,)

开始位置是1/3,结束位置是终点位置