本文主要向大家介绍了Photoshop入门学习之HTML 5  画布，通过具体的内容向大家展现，希望对大家Photoshop入门学习有所帮助。

<

线条：
context.moveTo(40, 40); // 将笔移动到 (40, 40)
context.lineTo(340, 40); // 用笔画线到 (340, 40)
context.stroke(); // 让线条描绘出来
路径：线条除了绘制直线, 还可以勾出路径. 路径是什么? 类似 Photoshop 的线圈工具. 在画布中可以使用 beginPath 和 closePath 两个方法搭配构建路径,
1. 绘制三根线条





context.moveTo(40, 40); // 将笔移动到 (40, 40)
context.lineTo(340, 40); // 用笔画线到 (340, 40)
context.lineTo(340, 100); // 用笔画线到 (340, 100)
context.lineTo(40, 100); // 用笔画线到 (40, 100)
context.stroke(); // 让线条显示出来




 
2. 在绘制线条之前标记路径结束. 路径将进行闭合：





context.beginPath(); // 开始路径
context.moveTo(340, 40); // 用笔画线到 (340, 40)
context.lineTo(340, 100); // 用笔画线到 (340, 100)
context.lineTo(40, 100); // 用笔画线到 (40, 100)
context.closePath(); // 结束路径
context.stroke(); // 让线条显示出来






3. 填充路径圈定区域.





context.beginPath(); // 开始路径
context.moveTo(340, 40); // 用笔画线到 (340, 40)
context.lineTo(340, 100); // 用笔画线到 (340, 100)
context.lineTo(40, 100); // 用笔画线到 (40, 100)
context.closePath(); // 结束路径
context.fill(); // 让线条显示出来





矩形
绘画矩形有用于勾画矩形和填充矩形使用的两个方法.





context.strokeRect(x, y, width, height); // 只勾画出矩形的外框
context.fillRect(x, y, width, height); // 画出矩形并使用颜色填充矩形区域





圆形
圆形与矩形不同, 没有勾画和填充的方法. 可通过 arc 圈出来的是圆形路径, 再通过前面提及的 stroke 和 fill 方法进行勾画和填充.





context.arc(x, y, radius, startAngle, endAngle, anticlockwise);





圆形
圆形与矩形不同, 没有勾画和填充的方法. 可通过 arc 圈出来的是圆形路径, 再通过前面提及的 stroke 和 fill 方法进行勾画和填充.




context.arc(x, y, radius, startAngle, endAngle, anticlockwise);




这一共有 6 个参数. x 是圆心的横坐标, y 是圆心的纵坐标, radius 是半径, startAngle 是开始画圆的角度, endAngle 是结束画圆的角度, anticlockwise 是画圆方向.    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注常用软件Photoshop频道！