canvas的简单使用介绍以及简单应用canvas绘制按钮样式
canvas简单使用
在使用canvas之前,我们需要了解canvas是什么
画布 canvas是一个标签、容器,用来接受画布元素,其本身不能绘制图形,需要js绘制图形放入canvas中显示
既然canvas是一个标签,那就意味着我们需要把canvas标签加入html中,我们在html里写一个canvas标签并设置宽高(canvas宽高通过属性设置而不是css样式),然后添加一个边框让它更显眼一点
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>矩形</title>
<style>
canvas{
border: 1px solid yellowgreen;
}
</style>
</head>
<body>
<canvas height='500' width="500"></canvas>
</body>
接下来开始绘制图形(包括 矩形、圆形、渐变、文字,不包括图片)
使用canvas绘制矩形
// 获取canvas对象
var canvas = document.querySelector('canvas')
// 获取2d上下文
var context = canvas.getContext('2d')
// 设置样式 填充样式、描边样式
context.fillStyle = 'red'
context.strokeStyle = 'blue'
// 设置线宽
context.lineWidth = '2'
// 开始绘制图形 下面三个方法的参数分别在代表起点x值、y值,宽、高
//填充矩形 填充样式为红色
context.fillRect(0,0,200,200)
//描边矩形 描边样式为蓝色
context.strokeRect(200,200,100
weixin_44262067: 你好 请问每次传入新数据再调用setData效果怎么样呢