教程学习使用,这对一般的使用者是一个挑战,不过作为一名合格的前端工作者,习惯阅读外文站点也是工作的一部分。下面通过一个示例了解使用Paper.js,开发使用Canvas的图形绘制应用。
【代码6-3】
01 <! DOCTYPE html> 02 < html> 03 < head> 04 < script type=" text/ javascript" src=" paper. js"></ script>
<!-- 引入 paper. js --> 05 < script type=" text/ paperscript" canvas=" canvas"> <!-- 执行 脚本 块 --> 06 function onMouseDrag( event) { // 鼠标 拖动 事件 07 var path = new Path. Circle({ // 新建 一个 圆形 路径 实例 08 center: event. downPoint, // 设置 中心点 坐标 09 radius: (event. downPoint - event. point). length, // 设置 圆形 半径 10 fillColor: 'white', // 设置 填充 颜色 11 strokeColor: 'black' // 设置 边框 颜色 12 }); 13 }; 14 </ script> 15 </ head> 16 < body> 17 < canvas id=" canvas" resize></ canvas> // 画布 元素 18 </ body> 19 </ html>