这篇文章主要介绍了一波HTML5 Canvas基础绘图实例代码集合,包括圆形矩形圆角等基本图形的绘制,需要的朋友可以参考下
基本绘制
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- var context = canvas.getContext('2d');
- // 线宽
- context.lineWidth = 4;
- // 画笔颜色
- context.strokeStyle = 'red';
- // 填充色
- context.fillStyle = "red";
- // 线帽类型
- context.lineCap = 'butt'; // round, square
- // 开始路径
- context.beginPath();
- // 起点
- context.moveTo(10,10);
- // 终点
- context.lineTo(150,50);
- // 绘制
- context.stroke();
- ｝
矩形
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.strokeRect(10,10,70,40);
- // 矩形的另一种方式
- context.rect(10,10.70,40);
- context.stroke();
- // 实心矩形
- context.beginPath();
- context.fillRect(10,10,70,40);
- // 另一种方式实心矩形
- context.beginPath();
- context.rect(10,10,70,40);
- context.fill();
- ｝
圆形
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- // 圆中心坐标x, 圆中心坐标Y, 圆弧半径， 起始角度，终止角度，是否逆时针
- // 第4个参数和第五个参数是要传入的弧度，如果画30角度，需要将其转化为弧度 30 * Math.PI / 180
- context.arc(100,100,70,0,130 * Math.PI / 180, true);
- context.stroke();
- context.fill();
- ｝
圆角
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.moveTo(20,20);
- context.lineTo(70,20);
- // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径，
- context.arcTo(120,30,120,70, 50);
- context.lineTo(120,120);
以上就是一波HTML5 Canvas基础绘图实例代码集合的详细内容，更多请关注0133技术站其它相关文章！
