定一个画布:
<canvas id="drawing" width="600" height="300">这是一个画布</canvas>
判断当前浏览器是否支持canvas
//用之前一定要先看看支不支持
if(draw.getContext){
//选用2D画布
var context=draw.getContext("2D");
}
2D可以做什么呢?简单的矩形,弧形,路径都可以画,远点坐标(0,0)左上角
<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
<!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
<!-- 内容区域 -->
<script>
var myCanvas = document.getElementById("myCanvas");
//用之前一定要先看看支不支持
if (myCanvas.getContext) {
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "#0000ff";
ctx.fillRect(20, 20, 150, 100);
}
</script>
绘制填充颜色的两个矩形:
<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
<!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
<!-- 内容区域 -->
<script>
var myCanvas = document.getElementById("myCanvas");
//用之前一定要先看看支不支持
if (myCanvas.getContext) {
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.fillRect(20, 20, 50, 50);
ctx.fillStyle = "rgb(0,0,255,0.5)";
ctx.fillRect(30, 30, 50, 50);
}
</script>
绘制两个带描边的矩形:
<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
<!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
<!-- 内容区域 -->
<script>
var myCanvas = document.getElementById("myCanvas");
//用之前一定要先看看支不支持
if (myCanvas.getContext) {
var ctx = myCanvas.getContext("2d");
ctx.strokeStyle = "#ff0000";
ctx.strokeRect(20, 20, 50, 50);
ctx.strokeStyle = "rgb(0,0,255,0.5)";
ctx.strokeRect(30, 30, 50, 50);
}
</script>
其他的控制属性:
<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
<!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
<!-- 内容区域 -->
<script>
var myCanvas = document.getElementById("myCanvas");
//用之前一定要先看看支不支持
if (myCanvas.getContext) {
var ctx = myCanvas.getContext("2d");
ctx.lineWidth=5;//线条宽度
ctx.lineCap="round";//线条末端的形状butt(平)、round(圆)、square(方)
ctx.lineJoin="bevel";//线条相交的方式round(圆角)、bevel(斜角)、miter(斜接)
ctx.strokeStyle = "#ff0000";
ctx.strokeRect(20, 20, 50, 50);
ctx.strokeStyle = "rgb(0,0,255,0.5)";
ctx.strokeRect(30, 30, 50, 50);
}
</script>
清除指定区域:
<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
<!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
<!-- 内容区域 -->
<script>
var myCanvas = document.getElementById("myCanvas");
//用之前一定要先看看支不支持
if (myCanvas.getContext) {
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.fillRect(20, 20, 50, 50);
ctx.fillStyle = "rgb(0,0,255,0.5)";
ctx.fillRect(30, 30, 50, 50);
ctx.clearRect(40,40,10,10);
}
</script>