Javascript函数绘图是Web前端开发的重要一环，作为一种用于控制Web页面动态呈现的脚本语言，Javacript的函数绘图特性可以帮助开发者实现多种有趣的交互效果和用户体验。

一个简单的例子是利用JavaScript函数绘制一个正弦曲线，代码如下：

function drawSine() {var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");var width = canvas.width;var height = canvas.height;context.beginPath();context.moveTo(0, height / 2);for (var x = 0; x< width; x++) {var y = height / 2 + Math.sin(x / 20) * 50;context.lineTo(x, y);}context.strokeStyle = "blue";context.stroke();}

以上代码中，Canvas元素是利用HTML5提供的元素，通过获取Canvas元素的方法，开发者可以在Canvas上绘制多种图形和效果。绘制正弦曲线的主要关注点在于计算每一个x点坐标的y值，而Math.sin函数可以帮助开发者计算x点坐标在sin函数图像上的y值。

除了单一的曲线图外，JavaScript函数绘图还可实现动态、多彩的图像效果。例如下面这段代码是一个彩虹渐变的圆形：

function drawCircle() {var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var width = canvas.width / 2;var height = canvas.height / 2;for (var radius = 0; radius< 250; radius += 5) {var r = 255 - (radius * 255 / 250);var g = radius * 255 / 250;var b = 0;context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";context.beginPath();context.arc(width, height, radius, 0, 2 * Math.PI, false);context.fill();}}

在圆形的绘制中，主要的难点在于掌握渐变色的计算，通过for循环算出每个半径的圆形的r、g、b值，并将其用于填充颜色。最终绘制出一个半径渐变从内向外的彩虹圆形效果。

总的来说，JavaScript函数绘图可以掌握绘制基本的图形、处理图片、制作动画等多种应用场景。对前端开发者来说，合理地运用JavaScript函数绘图是提高用户体验水平的好方法。