画布元素
canvash5新增
canvas地址
浏览器的坐标
直线
<body>
<canvas id="line" style="background-color: pink"></canvas>
<script type="text/javascript">
// 获取画布元素
var line = document.getElementById('line')
// 获取工具集
var cxt = line.getContext("2d")
// 定位开始点
cxt.moveTo(22, 22)
// 拖动并结束点
cxt.lineTo(102, 22)
// 绘制
cxt.stroke()
</script>
</body>
三角形
<body>
<canvas id="line" style="background-color: pink"></canvas>
<script type="text/javascript">
// 获取画布元素
var line = document.getElementById('line')
// 获取工具集
var cxt = line.getContext("2d")
// 定位点
cxt.moveTo(20, 20)
cxt.lineTo(150, 20)
cxt.lineTo(80, 80)
cxt.closePath()
// 绘制
cxt.stroke()
</script>
</body>
改变线条颜色
// 设置线条颜色
cxt.strokeStyle='red';
// 设置线条宽度
cxt.lineWidth=5;
改变每根线条的颜色， 重复此过程，把三根线连一起即可
// 设置颜色
cxt.strokeStyle='red';
cxt.moveTo(20, 20)
cxt.lineTo(150, 20)
// 绘制
cxt.stroke()
// 重置当前路径
cxt.beginPath();
文字
<body>
<canvas id="cvs" style="background-color: pink"></canvas>
<script type="text/javascript">
// 获取画布元素
var cvs = document.getElementById('cvs')
// 获取工具集
var context = cvs.getContext("2d")
// 文字样式
context.font='bold 30px sans-serif';
// 绘制文字
context.fillText('text', 30, 30);
context.strokeText('text', 30, 90);
</script>
</body>
两者区别
文字对齐，文字对齐的坐标轴，是相对于文字绘制的坐标的
context.textAlign='right';
context.textBaseline='middle';
将canvas图形输出到控制台
var imgUrl = cvs.toDataURL();
console.log(imgUrl)
矩形
<body>
<canvas id="cvs" style="background-color: pink"></canvas>
<script type="text/javascript">
// 获取画布元素
var cvs = document.getElementById('cvs')
// 获取工具集
var context = cvs.getContext("2d")
// 1.绘制路径
// context.rect(30, 30, 50, 50);
// 2.描边或填充
// context.stroke();
// context.fill()
// 调用一次方法完成
// context.strokeRect(30, 30, 50, 50);
context.fillRect(30, 30, 50, 50);
// 清空矩形内像素
context.clearRect(30, 30, 50, 50);
</script>
</body>
圆
// 绘制圆
context.arc(50, 50, 40,0, Math.PI / 180 * 360, true);
// context.stroke();
context.fill();
图片
// 定义图片对象
var img = new Image()
img.src='./img/dog.jpg'
img.onload = function () {
// 绘制图片
// context.drawImage(this, 10, 10);
// 指定图片的宽高
// context.drawImage(this, 10, 10, 122, 200);
// 裁切放大图片
context.drawImage(this, 120, 120, 100, 100, 10, 10, 300, 300);
}
刮刮卡
<body>
<canvas id="cvs"></canvas>
<script type="text/javascript">
// 获取画布元素
var cvs = document.getElementById('cvs')
// 获取工具集
var context = cvs.getContext("2d")
// 1. 定义中奖信息
var randomArr = ['一等奖', '二等奖', '三等奖', '没有奖']
var random = randomArr[Math.floor(Math.random()*randomArr.length)]
context.font='bold 30px sans-serif';
context.textAlign = 'center'
context.textBaseline='middle';
context.fillStyle='red';
context.fillText(random, cvs.width/2, cvs.height/2);
// 2. 将中奖信息生成为背景图片，清空画布,绘制覆盖的矩形
var imgUrl = cvs.toDataURL('iamge/png',1)
cvs.style.background = 'url('+imgUrl+')'
context.clearRect(0, 0, cvs.width, cvs.height);
context.fillStyle='#666'
context.fillRect(0, 0, cvs.width, cvs.height);
// 3. 实现刮擦的效果
var flag = false
cvs.addEventListener('mousedown', function() {
flag = true
// 将刮擦过的区域设置为透明
context.globalCompositeOperation='destination-out';
})
cvs.addEventListener('mousemove', function(e) {
if(flag) {
var x = e.clientX
var y = e.clientY
context.fillRect(x, y, 40, 40)
}
})
cvs.addEventListener('mouseup', function() {
flag = false
})
</script>
</body>
网友评论