canvas学习笔记2

创建一个画布，并在画布上面创建2个矩形

知识点：fillRect是创建实心的矩形样式可以用过fillStyle进行设置

　　　　strokeRect是创建实心的矩形样式可以用过strokeStyle进行设置

　　　　clearRect是清除指定的矩形区域，然后这块区域会变的完全透明。

　　　　其中里面的参数（0,0,100,50,）表示为：0,0,表示创建的矩形在画布上面的位置，第一个表示X轴、第二个表示Y轴

　　　　100,50表示创建出来的矩形的宽高

具体小demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>canvas的学习</title>
<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>


<canvas id="huaban" width="300" height="400"></canvas>
</body>
<script type="text/jscript">
function draw(){
// 3、获取canvas元素
var canvas = document.getElementById("huaban")
// 4、创建context对象。获取2d的上下文对象
// getContext('2d')对象是内建的html5对象,拥有多种绘制路径、矩形,圆形,字符以及添加图形
var ctx=canvas.getContext('2d')
// 5、先绘制一个红色的填充的矩形
// fillStyle属性可以是css的颜色,渐变,或者图案.fillStyle默认颜色为黑色
// fillRect表示实心的矩形,0,0,表示绘制的矩形在canvas中位置,第一个表示x轴,第二个表示y轴
// 100,50表示绘制出来的图形的大小,第一个表示宽度、第二个为高度
// ctx.fillStyle='red'
// ctx.fillRect(0,0,100,50)
// 6、先绘制一个粉红色边框的矩形
//strokeStyle属性可以是css的颜色,渐变,或者图案.fillStyle默认颜色为黑色
// strokeStyle表示空心的矩形,100,100,表示绘制的矩形在canvas中位置,第一个表示x轴,第二个表示y轴
// 80,50表示绘制出来的图形的大小,第一个表示宽度、第二个为高度
// ctx.strokeStyle='blue',
// ctx.strokeRect(100,100,80,80)

// 7、清除指定的矩形区域，然后这块区域会变的完全透明。
ctx.clearRect(5,5,20,20)

}
draw()
</script>
</html>

图例

posted @ 2020-03-23 12:17 小小小~ 阅读(141) 评论(0) 收藏举报

小码农一个

canvas学习笔记2

公告