连续使用贝塞尔曲线绘制函数,可以绘制首尾相连的复杂曲线。看下面的例子:
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 提供了两种方法来渲染文本:
下面是一个简单的例子:
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方法,上一个保存的状态就从栈中……继续阅读 »