html5笔记3 — canvas绘画矩形、圆

最新推荐文章于 2023-06-08 15:50:16 发布

erdouzhang

最新推荐文章于 2023-06-08 15:50:16 发布

阅读量529

点赞数

分类专栏： html5+css3 文章标签： canvas

本文链接：https://blog.csdn.net/erdouzhang/article/details/61202285

版权

html5+css3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

canvas是html5中新增加的一个元素，专门用来绘制图形。

1. 创建画布

<script src="canvas.js"></script>引入canvas.js文件

<body onload="draw('canvas');">
    <canvas id="canvas" width="500" height="350"></canvas>
</body>

意思是：
先引入canvas.js脚本文件。
然后指定id，创建一个宽500px，高350px。
再在body属性里使用onload="draw('canvas');"函数进行图形绘画。

2.绘画矩形

这里写图片描述

html代码:

<body onload="draw('canvas');">
 <canvas id="canvas" width="500" height="350"></canvas>
</body>

js代码：

function draw(id){
  // 获取canvas的id
  var canvas = document.getElementById('canvas');
  // 取得上下文
  var context = canvas.getContext('2d');
  // 设置绘制样式：设置填充颜色、设置边框颜色、指定画笔的宽度
  context.fillStyle = "#000";
  context.strokeStyle = "#fff";
  context.lineWidth = 5;
  // 填充与绘制边框
  context.fillRect(0,0,500,350);
  context.strokeRect(50,50,180,120);
  context.strokeRect(100,100,180,120);
}

解析：

var canvas = document.getElementById(‘canvas’); 是获取canvas的id；
var context = canvas.getContext(‘2d’); 是取得上下文，并设置为2d;
context.fillStyle = “#000”; 表示画布填充颜色是黑色；
context.strokeStyle = “#fff” ; 表示矩形边框颜色是白色；
context.lineWidth = 5; 表示画笔粗细是5px
context.fillRect(0,0,500,350); 表示填充颜色从 x轴0，Y轴0，填充的宽度是500，高度是350；
context.strokeRect(50,50,180,120); 表示矩形x轴50，Y轴50，矩形的宽度是180，高度是180；
context.strokeRect(100,100,180,120); 表示矩形x轴100，Y轴100，矩形的宽度是180，高度是180；
即两个矩形重叠一部分。

context.fillRect(x,y,width,hight); //x,y分别表示横向坐标起点，纵向坐标起点;width,hight分别表示填充的宽和高
context.strokeRect(x,y,width,hight); //x,y分别表示横向坐标起点，纵向坐标起点;width,hight分别表示矩形的宽和高

3.绘画一个圆

这里写图片描述

html：

<body onload="draw('canvas');">
 <canvas id="canvas" width="500" height="350"></canvas>
</body>

js :

function draw(id){
  // 1.获取canvas的id
  var canvas = document.getElementById('canvas');
  //2. 取得上下文
  var context = canvas.getContext('2d');
  // 3.绘制背景颜色及区域
  context.fillStyle = "#eee";
  context.fillRect(0,0,500,350);
  // 4.开始路径
  context.beginPath();
  // 5.创建图形路径
  context.arc(10,10,10,0,Math.PI*2,true);
  // 6.关闭图形路径
  context.closePath();
  // 7.设置圆形填充色
  context.fillStyle = "rgba(250,0,0,0.25)";
  context.fill();
}

解析：
context.arc(x,y,radius,starAngle,endAngle,anticlockwise);
x:横向起点坐标
y:纵向起点坐标
radius:圆半径
starAngle：开始角度   
endAngle:结束角度  Math.PI*2代表360度
anticlockwise: 是否按照顺时针方向绘制

4. 绘画多个填充圆

这里写图片描述

html不变都一样。

js:

function draw(id){
  // 获取canvas的id
  var canvas = document.getElementById('canvas');
  // 取得上下文
  var context = canvas.getContext('2d');
  // 绘制背景
  context.fillStyle = "#eee";
  context.fillRect(0,0,500,350);
  for(var i = 0; i < 10;i++){
    // 开始路径
    context.beginPath();
    // 创建图形路径
    context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
    // 关闭图形路径
    context.closePath();
    // 设置填充颜色
    context.fillStyle = "rgba(250,0,0,0.25)";
    context.fill();
  }
}

用for循环来进行绘画，让x轴，y轴，圆半径按倍数扩大。

5.绘画多个圆

这里写图片描述

html不变
js:

function draw(id){
  // 获取canvas的id
  var canvas = document.getElementById('canvas');
  // 取得上下文
  var context = canvas.getContext('2d');
  // 绘制背景
  context.fillStyle = "#eee";
  context.fillRect(0,0,500,350);
  for(var i = 0; i < 10;i++){
    // 开始路径
    context.beginPath();
    // 创建图形路径
    context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
    // 关闭图形路径
    context.closePath();
    // 设置边框颜色    
    context.strokeStyle = "green";
    context.stroke();
  }
}

4和5同时使用

这里写图片描述

js:

function draw(id){
  // 获取canvas的id
  var canvas = document.getElementById('canvas');
  // 取得上下文
  var context = canvas.getContext('2d');
  // 绘制背景
  context.fillStyle = "#eee";
  context.fillRect(0,0,500,350);
  for(var i = 0; i < 10;i++){
    // 开始路径
    context.beginPath();
    // 创建图形路径
    context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
    // 关闭图形路径
    context.closePath();
    // 设置填充色及边框颜色
    context.fillStyle = "rgba(250,0,0,0.25)";
    context.fill();
    context.strokeStyle = "red";
    context.stroke();
  }
}

erdouzhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5笔记3 — canvas绘画矩形、圆

canvas是html5中新增加的一个元素，专门用来绘制图形。1. 创建画布<script src="canvas.js"></script>引入canvas.js文件<body onload="draw('canvas');"> <canvas id="canvas" width="500" height="350"></canvas></body>意思是：先引入canvas.js脚
复制链接

扫一扫

专栏目录