<!DOCTYPE>
<html>
<head>
<style type="text/css">
canvas { border: 1px solid #666;}
</style>
</head>
<canvas id="canvas1"></canvas>
</html>
<script>
let canvas1 = document.getElementById('canvas1') //通过id获取canvas元素
let ctx1 = canvas1.getContext('2d')
ctx1.fillStyle = 'rgb(200, 0, 0)'
ctx1.fillRect(10, 10, 55, 50)
ctx1.fillStyle = 'rgba(0, 0, 200, 0.5)'
ctx1.fillRect(25, 25, 55, 50)
</script>
绘制结果
HTML中的元素canvas只支持一种原生的图形绘制：矩形。
canvas提供了三种方法绘制矩形
- fillRect(x, y, width, height) 绘制一个填充的矩形
- strokeRect(x, y, width, height) 绘制一个矩形的边框
- clearRect(x, y, width, height) 清除指定矩形区域, 让清除部分完全透明
导出图像
使用toDataURL方法, 可以导出在<canvas>元素上绘制的图像, 该方法接受一个参数, 即图像的MIME类型格式
网友评论