程序员的基本素养之——canvas绘图技术新手版
程序员的基本素养之——canvas绘图技术新手版
目录
1.canvas简述
2.画线
3.画矩形
4.画圆(扇形)
5.文字
6.线性渐变
7.放射性渐变
1.canvas简述
q.canvas是什么?
canvas是浏览器提供的绘图机制,使用canvas 标签和js脚本绘图想要绘制的图形
2.画线
q.如何画线?
step1:添加canvas标签,设置宽度和高度,
step2:获取对象,获取图形上下文
step3:在图形上下文绘制图形
画线: moveTo(), lineTo, 真正画线
3.画矩形
q.如何画矩形?
beginPath
使用 ctx.rect()
closePath
在使用fill()或者stroke
使用 ctx.fillRect()
ctx.strokeRect()
4.画圆(扇形)
q.如何画圆
使用 ctx.arc()
5.文字
q.如何写文字
fillText()
strokeText()
**1.demo1——canvas绘制矩形 **
定义一个画布宽高为500
var myCanvas = document.getElementById("myCanvas")
var ctx = myCanvas.getContext("2d")
得到canvas对象
绘制空心矩形
重点: 所有除了fillRect和strokeRect,所有都由
beginPath开始, 意义是开始一个新路径
ctx.beginPath()
//参数: x,y,w,h
ctx.rect(50,50,200,100)
ctx.lineWidth = 2
ctx.closePath()
//stroke 描边
//fill 填充
ctx.strokeStyle = "red"
// 如果以beginPath开始,以stroke或者fill结束
ctx.stroke()
这样就可以得到一个宽200高100的空心矩形border是红色；实心矩形的话只需要以fill闭合就可以。
2.demo2——canvas绘制线条
前边操作基本相同，建立画布=>得到canvas对象=>ctx.beginPath()开始=>stroke或fill 结尾；不同的是中间的代码：
ctx.beginPath()
ctx.moveTo(100,50)
ctx.lineTo(200,150)
ctx.lineTo(300,50)
ctx.lineTo(400,150)
ctx.lineWidth = 5
ctx.strokeStyle = "red"
ctx.stroke()
两点确定一条线段
moveTo(x,y)为开始点的坐标，lineTo(x,y)当前线段的结束坐标点，lineWidth是线段的宽度，.strokeStyle 是线段的颜色；
线段的绘制完成我们还可以通过线段来绘制多边形
例如
三角形
ctx.beginPath()
ctx.moveTo(100,200)
ctx.lineTo(200,300)
ctx.lineTo(300,200)
ctx.closePath()
ctx.lineWidth = 5
ctx.strokeStyle = "red"
//stroke 描边
//fill 填充
ctx.stroke()
平行四边形行
ctx.beginPath()
ctx.moveTo(100,200)
ctx.lineTo(200,300)
ctx.lineTo(300,200)
ctx.closePath()
ctx.lineWidth = 5
ctx.strokeStyle = "red"
//stroke 描边
//fill 填充
ctx.stroke()
等等...
3.demo3——canvas绘制圆
圆形的话只有一个函数
arc(x,y,r,c,a)
前两个参数代表坐标，r为圆的半径,c为开始角度，a为结束角度；
ctx.beginPath()
ctx.arc(100,100,80,0,Math.PI*2)
ctx.fillStyle = "red"
ctx.fill()
ctx.beginPath()
ctx.moveTo(300,300)
ctx.arc(300,300,80,0,Math.PI/2*3)
ctx.fillStyle = "blue"
ctx.fill()
4.demo4——canvas绘制渐变色
//创建渐变色对象
//第一个和第二个参数: 渐变色开始点
//第三个参数和第四: 渐变色结束点
var gc = ctx.createLinearGradient(50,50,50,350);
gc.addColorStop(0,"#ccc")
gc.addColorStop(0.8,"red")
gc.addColorStop(1,"#333")
ctx.fillStyle = gc
ctx.fillRect(50,50,300,400)。
5.demo5——canvas绘制椭圆
ctx.strokeRect(100,100,100,100)
ctx.save()
ctx.beginPath()
ctx.translate(150,150)
ctx.rotate(Math.PI/180*135)
ctx.scale(1,0.5)
ctx.arc(0,0,50,0,Math.PI*2)
ctx.stroke()
ctx.restore()
ctx.strokeRect(100,300,100,100)。
最后就用canvas制作个太极图来当做结尾了，废话不多说看代码.
canvas的应用有许多，例如饼状图、折线图、等统计用具，还有绘制图片、文字等来完成更多好看好玩的效果，今天的新手指引就到这里望大家多多指点.