# 案例3:绘制复杂圆形
先看图:
![](https://img.kancloud.cn/46/90/4690be8951492160cc00e961f8ac0000_385x510.png)
相关代码如下:‘
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="300" height="400">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
function draw(id) {
var canvas = document.getElementById(id); //step1:获取canvas元素
var context = canvas.getContext("2d"); //step2:内建的HTML5对象
context.fillStyle = "#eeeeef"; //step3-1:填充红色
context.fillRect(0, 0, 300, 400); //step3-2:绘制矩形
context.beginPath(); //step4-1:开始绘图
context.fillStyle = "rgb(100, 255, 100)"; //step4-2:设置绘图科区域颜色
context.strokeStyle = "rgb(0, 0, 100)"; //step4-3:设置线条颜色
//step4-4:绘制贝塞尔曲线
var dx = 150;
var dy = 150;
var s = 100;
var x = Math.sin(0); //初始值为0
var y = Math.cos(0); //初始值为1
var dig = Math.PI / 15 * 11;
for (var i = 0; i < 30; i++) { //不断地旋转绘制线条
x = Math.sin(i * dig);
y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath(); //step4-5:结束绘图
context.fill(); //step4-6:填充颜色
context.stroke(); //step4-7:绘制线条
}
</script>
</body>
</html>
~~~
- Canvas基本功能
- 绘制方法
- (一)Canvas标签
- 定义Canvas标签
- 理解Canvas坐标系
- 获取Canvas环境上下文
- (二)Canvas图形
- 绘制Canvas路径
- 1、绘制线条
- 案例1:绘制直线
- 案例2:绘制圆形的结束线帽
- 案例3:绘制复杂圆形
- 2、绘制矩形
- 案例1:rect()与stroke()绘制矩形
- 案例2:fillRect()绘制矩形
- 3、绘制圆形
- 案例1
- 案例2
- 4、绘制贝塞尔曲线
- 案例1:贝塞尔曲线方式1
- 案例2:贝塞尔曲线方式2
- 案例3:复杂的贝塞尔曲线
- 绘制Canvas变形图形
- 处理Canvas图形
- (三)Canvas文本
- 绘制文字
- 设置文字格式
- 设置文字对齐方式
- (四)Canvas图片
- 绘制drawImage图片
- 使用getImageData()和putImageData()绘制图片
- 使用createImageData新建像素
- 参考文章
- API官网
- 示例