- 理解Canvas元素
- 绘制简单的2D图形
- 使用WebGL绘制3D图形
1.基本语法
<canvas width="200" height="200" id="drawing">
如果不支持将显示这些信息
</canvas>
<script>
//要绘图必须先取得绘图上下文对象.使用getContext()传入名字.传入2d就可以取得2D上下文对象
var d1 = document.getElementById('drawing')
//确定浏览器支持canvas元素
//toDataURL方法可以导出canvas元素上绘制的图像.接收一个参数就是MIME格式.
if(d1.getContext){
var context = d1.getContext('2d')
//取得画布一副png图像.
var iurl = d1.toDataURL('image/png')
//显示图像
var image = document.createElement('img')
image.src = iurl
document.body.appendChild(image)
}
</script>
2.2D上下文
<canvas width="200" height="200" id="drawing"></canvas>
<canvas width="300" height="300" id="d2"></canvas>
<script>
//2d上下文会细分为填充和描边操作.这两个操作的结果取决于:fillStyle和strokeStyle,默认值为:#000000
var d1 = document.getElementById('drawing')
var context = d1.getContext('2d')
console.log(context)
context.strokeStyle = "red"
context.fillStyle = "#0000ff"
//写到页面里
var url = d1.toDataURL('image/png')
var image = document.createElement('img')
image.src = url
document.body.appendChild(image)
//绘制矩形 相关方法包括fillRect(),strokeRect(),和clearRect()
var d2 = document.getElementById('d2')
var c2 = d2.getContext('2d')
//绘制红色矩形
c2.fillStyle = "red"
c2.fillRect(10,10,50,50)
//绘制半透明的蓝色矩形
c2.fillStyle = "rgba(0,0,255,.6)"
c2.fillRect(30,30,50,50)
//描边
c2.strokeStyle = "aqua"
c2.strokeRect(10,10,50,50)
//半透明描边
c2.strokeStyle = "rbga(0,255,0,.6)"
c2.strokeRect(30,30,50,50)
//clearRect用于清除画布上的矩形区域
c2.clearRect(40,40,10,10)
</script>
3.绘制路径
//2d上下文会细分为填充和描边操作.这两个操作的结果取决于:fillStyle和strokeStyle,默认值为:#000000
var d1 = document.getElementById('drawing')
var c1 = d1.getContext('2d')
c1.strokeStyle = "red"
c1.fillStyle = "#0000ff"
//写到页面里
var url = d1.toDataURL('image/png')
var image = document.createElement('img')
image.src = url
document.body.appendChild(image)
//绘制矩形 相关方法包括fillRect(),strokeRect(),和clearRect()
var d2 = document.getElementById('d2')
var c2 = d2.getContext('2d')
//绘制红色矩形
c2.fillStyle = "red"
c2.fillRect(10,10,50,50)
//绘制半透明的蓝色矩形
c2.fillStyle = "rgba(0,0,255,.6)"
c2.fillRect(30,30,50,50)
//描边
c2.strokeStyle = "aqua"
c2.strokeRect(10,10,50,50)
//半透明描边
c2.strokeStyle = "rbga(0,255,0,.6)"
c2.strokeRect(30,30,50,50)
//clearRect用于清除画布上的矩形区域
c2.clearRect(40,40,10,10)
//绘制路径 绘制路径首先必须调用beginPath.表示开始新路径
var d3 = document.getElementById('d3')
var c3 = d3.getContext('2d')
//开始路径
c3.beginPath()
//绘制外圈
//arc以100,100为圆心绘制一条弧线,弧线半径为99,起始和结束角度分别为0和2*Math.PI,最后的参数为是否顺时针计算,false为顺时针
c3.arc(100,100,99,0,2 *Math.PI,false)
//绘制内圆
c3.moveTo(194,100) //将绘图游标移动到194,100,不画线.
//arc以100,100为圆心绘制一条弧线,弧线半径为94起始和结束角度分别为0和2*Math.PI,最后的参数为是否顺时针计算
c3.arc(100,100,94,0,2 * Math.PI,false)
//绘制分针
c3.moveTo(100,100) //将绘图游标移动到100,100.不画线
c3.lineTo(100,15) //从上一点开始绘制一条直线,直到100,15停止
//绘制时针
c3.moveTo(100,100) //将绘图游标移动到100,100,不画线
c3.lineTo(35,100) //从上一点开始绘制一条直线,知道35,100停止
//填充
//描边路径
c3.stroke() //上面绘制的路径进行描边,所以就绘制出来了图形
//isPointInPath() //接收x和y坐标为参数,用于在路径被关闭之前确定画布上的某个点是否位于路径上
if(c3.isPointInPath(100,100)){
// alert('Point 100x100 在路径里')
}
//绘制文本
//绘制文本的主要方法为fillText和strokeText
//上面两个方法都接收4个参数:要绘制的文本字符串,x和y坐标和可选的最大像素度.
//给上面的表盘加上数字
c3.font = 'bold 14px Arial'
//文本水平方向
c3.textAlign = 'center'
//文本基线,也就是垂直方向
c3.textBaseline = "middle"
//将12这个文本字符串绘制到100,20上
c3.fillText("12",100,20)
//起点对齐
c3.textAlign = 'start'
c3.fillText('12',100,40)
//终点对齐
c3.textAlign = "end"
c3.fillText('12',100,60)
var fontSize = 100;
c1.font = fontSize + 'px Arial'
while(c1.measureText('Hello World!').width >140){
fontSize--
c1.font = fontSize + 'px Arial'
}
c1.fillText('Hello World',10,10)
c1.fillText('Font size is ' + fontSize + 'px',10,50)
//如下方法可以修改变化矩阵
//rotate(angle) 围绕原点旋转图像angle弧度
//scale(scaleX,scaleY) 缩放图像,在X方向乘以scaleX,在Y方向乘以scaleY,scaleX和scaleY默认值都是1.0
//translate(x,y) 将坐标原点移动到x,y.执行这个变换之后,左边0,0会变成之前由x,y表示的点
//transform(m1_1,m1_2,m2_1.m2_2,dx,dy) 直接修改变换矩阵,方式是乘以如下矩阵.
//setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy) 将变化矩阵重置为默认状态，然后在调用transform()
var d1 = document.getElementById('d1')
var c1 = d1.getContext('2d')
//开始路径
c1.beginPath()
//绘制外圆
c1.arc(100,100,99,0,2 * Math.PI,false)
//绘制内圆
c1.moveTo(194,100)
c1.arc(100,100,94,0,2 * Math.PI,false)
//变换原点
c1.translate(100,100)
//旋转表针
c1.rotate(1)
//绘制分针
c1.moveTo(0,0)
c1.lineTo(0,-85)
//绘制时针
c1.moveTo(0,0)
c1.lineTo(-65,0)
//描边路径
c1.stroke()
var d2 = document.getElementById('d2')
var c2 = d2.getContext('2d')
c2.fillStyle = '#ff0000'
c2.save()
c2.fillStyle = '#00ff00'
c2.translate(100,100)
c2.save()
c2.fillStyle = '#0000ff'
//从点100,100开始绘制蓝色矩形
c2.fillRect(0,0,100,200)
c2.restore()
c2.fillRect(10,10,100,200)
c2.restore()
c2.fillRect(0,0,100,200)
<img src="http://img0.imgtn.bdimg.com/it/u=2854956166,1658664264&fm=26&gp=0.jpg" alt="">
<canvas width="200" height="200" id="d1"></canvas>
<canvas width="300" height="300" id="d2"></canvas>
<canvas width="300" height="300" id="d3"></canvas>
<canvas width="300" height="300" id="d4"></canvas>
<canvas width="300" height="300" id="d5"></canvas>
<script>
//绘制图像
var d1 = document.getElementById('d1')
var c1 = d1.getContext('2d')
var image = document.images[0]
c1.drawImage(image,10,10)
c1.drawImage(image,50,10,20,30)
//绘制的图像,源图像的x坐标.源图像的y坐标,源图像的宽度,源图像的高度,目标图像的x坐标,目标图像的y坐标,目标图像的宽度,目标图像的高度
c1.drawImage(image,0,10,50,50,0,100,40,60)
//阴影
//shadowColor 用css颜色格式表示的阴影颜色,默认为黑色
//shadowOffsetX 形状或路径x轴方向的阴影偏移量,默认为0
//shadowOffsetY 形状或路径Y轴方向的阴影偏移量,默认为0
//shadowBlur 模糊的像素数,默认为0,即不模糊
//设置阴影
c1.shadowOffsetX = 5
c1.shadowOffsetY = 5
c1.shadowBlur = 4
c1.shadowColor = "rgba(0,0,0,.5)"
c1.fillStyle = '#ff0000'
c1.fillRect(10,10,50,50)
//绘制蓝色矩形
c1.fillStyle = 'rgba(0,0,255,1)'
c1.fillRect(30,30,50,50)
//渐变
//createLinearGradient方法.4个参数,起点x,y坐标,终点x,y坐标
//addColorStop指定色标,2个参数:色标位置和css颜色值
//如下:
var d2 = document.getElementById('d2')
var c2 = d2.getContext('2d')
var g = c2.createLinearGradient(30,30,70,70)
g.addColorStop(0,"white")
g.addColorStop(1,"black")
//绘制红色矩形
c2.fillStyle = "#ff0000"
c2.fillRect(10,10,50,50)
//绘制渐变矩形
c2.fillStyle = g
c2.fillRect(30,30,50,50)
c2.fillRect(50,50,50,50)
//渐变函数
function jb(context,x,y,width,height){
return context.createLinearGradient(x,y,x+width,y+height)
}
var g1 = jb(c2,30,30,50,50)
g1.addColorStop(0,"white")
g1.addColorStop(1,"black")
//绘制渐变
c2.fillStyle = g1
c2.fillRect(30,30,50,50)
var d3 = document.getElementById('d3')
var c3 = d3.getContext('2d')
var g3 = c2.createRadialGradient(55,55,10,55,55,30)
g3.addColorStop(0,"red")
g3.addColorStop(1,"blue")
//绘制矩形
c3.fillStyle = '#000'
c3.fillRect(10,10,50,50)
//绘制渐变
c3.fillStyle = g3
c3.fillRect(30,30,50,50)
//模式
var d4 = document.getElementById('d4')
var c4 = d4.getContext('2d')
var i1 = document.images[0],
pt = c4.createPattern(i1,"repeat")
//绘制矩形
c4.fillStyle = pt
c4.fillRect(10,10,150,150)
//使用图像数据
//getImageData()取得原始图像数据,4个参数:画面区域的x和y坐标以及该区域的像素宽度和高度
var i2 = c2.getImageData(10,5,50,50)
console.log(i2)
//合成
var d5 = document.getElementById('d5')
var c5 = d5.getContext('2d')
c5.fillStyle = '#ff0000'
c5.fillRect(10,10,50,50)
c5.globalAlpha = 0.5
c5.globalCompositeOperation = "destination-over"
c5.fillStyle = "rgba(0,0,255,1)"
c5.fillRect(30,30,50,50)
c5.globalAlpha = 0
</script>
4984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
