canvas画矩形圆形直线三角形
2017-05-26 本文已影响229人
红姑娘
开发笔记之-canvas画矩形圆形直线三角形
1.页面如下：
<body>
<canvas id="mycanvas" style="background-color: #CAF1CA;" width="300" height="300"></canvas>
<input type="button" value="绘制长方形" onclick="drowLong()" />
<input type="button" value="绘制直线" onclick="drowLine()" />
<input type="button" value="绘制圆" onclick="drowRound()" />
<input type="button" value="绘制三角形" onclick="drowTriangle()" />
<input type="button" name="" id="" value="二次贝塞尔曲线" onclick="drowBezier()" />
</body>
2.绘制长方形
<script type="text/javascript">
function drowLong() { //绘制长方形
var c = document.getElementById('mycanvas') //获取画板对象
var ctx = c.getContext('2d') //获取上下文
ctx.fillStyle = '#0097BF' //设置填充的颜色
// fillRect(x: Number, y: Number, w: Number, h: Number): none
// 坐标x 坐标y 宽度 高度
ctx.fillRect(0, 0, 100, 100) //绘制长方形
}
</script>
3.绘制圆
<script type="text/javascript">
function drowRound() { //绘制圆
var c = document.getElementById('mycanvas') //获取画板对象
var ctx = c.getContext('2d') //获取上下文
ctx.strokeStyle = '#DF492F' //设置线条颜色
ctx.fillStyle = '#007C2F' //设置填充颜色
ctx.beginPath() //开始
// arc(//绘制
// x: Number,圆心x
// y: Number, 圆心y
// radius: Number,半径大小
// startAngle: Number,开始角度
// endAngle: Number, 结束角度
// anticlockwise: Boolean): none是否顺时针绘制
ctx.arc(100, 100, 50, Math.PI, 0, true)
ctx.closePath() //结束
ctx.fill() //填充颜色
ctx.stroke() //开始绘制直线
}
</script>
4.绘制三角形
<script type="text/javascript">
function drowTriangle() { //绘制三角形
var c = document.getElementById('mycanvas') //获取画板对象
var ctx = c.getContext('2d') //获取上下文
ctx.strokeStyle = '#DF492F' //设置线条颜色
ctx.fillStyle = '#007C2F' //设置填充的颜色
ctx.beginPath()
ctx.moveTo(150, 0) //起点
ctx.lineTo(200, 50) //第二点
ctx.lineTo(150, 100) //第三点
ctx.closePath()
ctx.stroke() //开始绘制直线
ctx.fill() //填充颜色
}
</script>
5.绘制二次贝塞尔曲线
Canvas二次贝塞尔曲线模拟
http://www.j--d.com/bezier
<script type="text/javascript">
function drowBezier(){
var canvas = document.getElementById('mycanvas')
var ctx = canvas.getContext('2d')
ctx.lineWidth=6//线条宽度
ctx.strokeStyle='#DF492F'//线条颜色
ctx.moveTo(10,150)//起点
//quadraticCurveTo(cpx: Number, cpy: Number, x: Number, y: Number): none
// 节点x 节点y 终点x 终点y
ctx.quadraticCurveTo(131,81,250,250)
ctx.closePath()
ctx.stroke()//绘制
}
</script>
屏幕快照 2017-05-26 14.55.27.png
6.三次贝塞尔曲线
<script type="text/javascript">
function drowBezier(){
var canvas = document.getElementById('mycanvas')
var ctx = canvas.getContext('2d')
ctx.lineWidth=6//线条宽度
ctx.strokeStyle='#DF492F'//线条颜色
ctx.moveTo(10,150)//起点
//bezierCurveTo(cp1x: Number, cp1y: Number, cp2x: Number, cp2y: Number, x: Number, y: Number): none
// 1节点x 1节点y 2节点x 2节点y 终点x 终点y
ctx.bezierCurveTo(150, 100, 350, 100, 400, 250);
ctx.closePath()
ctx.stroke()//绘制
}
</script>
屏幕快照 2017-05-26 15.08.27.png
注：
ctx.save()//保存
ctx.restore()//恢复
ctx.translate(100 , 100)//在x y 轴移动的位移100
ctx.rotate( 30 * Math.PI /180 )//旋转角度
ctx.scale(1,0.5)//缩放倍数 x放大1倍 y缩放0.5
控制图形的组合：
ctx.globalCompositeOperation='source-over'
屏幕快照 2017-05-26 16.33.09.png
