连续使用贝塞尔曲线绘制函数，可以绘制首尾相连的复杂曲线。看下面的例子：

var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 二次贝塞尔曲线 ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke();

显示效果如下：

绘制文本

canvas 提供了两种方法来渲染文本：

fillText(text, x, y [, maxWidth])

strokeText(text, x, y [, maxWidth])

在指定的(x,y)位置绘制文本边框

参数和fillText()函数相同

下面是一个简单的例子：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "48px serif";// 指定字体大小 ctx.fillText("fillText", 50, 100, 100); // 指定宽度进行缩放 ctx.strokeText("strokeText", 50, 150);

转载请注明出处 canvas基本图形绘制

canvas

C++11线程库 第一节 线程管理 canvas样式和颜色

canvas API总结

canvas动画

canvas图像保存

canvas使用图片，图形组合以及裁剪

2018年03月2日的内容 canvas图像保存

通过前面的章节，我们能够在canvas画出各种炫酷多样的图形，但是这些画好的图像如何保存下一次使用呢？这篇文章将会探讨如何保存和加载canvas画布上的图像。 如何绘制基本图形可以参考：canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考：canvas图形变换 如何设置基本图形颜色和样式可以参考：canvas样式和颜色 如何使用外部图片以及图形组合……继续阅读 » canvas使用图片，图形组合以及裁剪

这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动，旋转，缩放等变形方法，还会介绍如何在canvas中加载图像，图形之间的组合方式以及裁剪。 如何绘制基本图形可以参考：canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考：canvas图形变换 如何设置基本图形颜色和样式可以参考：canvas样式和颜色 canvas系列教程可以参考：can……继续阅读 » canvas图形变换

这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动，旋转，缩放等变形方法，还会介绍如何在canvas中加载图像。 状态的保存和恢复 为了在变形之后，能够将图形恢复原样，需要保存图形的原有状态： save() restore保存和恢复canvas状态，都没有参数。 可以调用任意多次save方法 每一次调用restore方法，上一个保存的状态就从栈中……继续阅读 »