如何制作手绘卡通人物动画那种手拿着笔在白纸上画的视频

来源：蜘蛛抓取(WebSpider) 时间：2020-09-14 09:59 标签： 手绘卡通人物

  • 答：1.如果只有丙肝病毒指标阳性而未发现任何肝脏功能损害的证据，尤其是肝活检组织病理 无明显肝细胞破坏时则诊断为丙肝病毒无症状携带者。正确诊断丙型肝炎全面掌握...

继续为上篇的跑道树林添砖加瓦

  1. 加载图像做为树干的背景
  2. 使用背景图让跑道更加真实
  3. 为树木添加阳光照射下的阴影效果
  4. 添加文本标题，并为文本增加阴影效果使用Canvas Shadow API。

加载图像做为树干的背景功能点为：在canvas 中插入图片

上篇使用矩形填充颜色的功能为树冠增加树干，但总体效果并不是很理想达不到真囸树木的要求。我们需要一张更带有树皮纹理的图片做为树干基本的步骤分为：

  1. 为图片对象指定图片来源
  2. 在图片加载完成后，将其显示茬canvas上 

 最后我们看到的效果就是这样：

上篇代码使用到了createPattern方法，该方法为创建返回一个CanvasPattern 对象该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域可以把一个CanvasPattern对象用作stokeStyle 属性或fillStyle 属性的值。

这个参数通常是一个 Image 对象但是也可以使用一个 Canvas 元素。

说明圖像如何贴图可能的值如下所示：
  • "repeat" - 在各个方向上都对图像贴图。默认值

为了符合树林的特点，还必须再另外制造树木和倾倒的树木離可视点的比较近的地方往往我们会觉得看起来比较大。这些功能都可以用HTML的HTML DOM CanvasRenderingContext2D 对象实现

 关于scale 方法的功能描述和语法参考如下：

scale() 方法标注畫布的用户坐标系统。

scale() 方法为画布的当前变换矩阵添加一个缩放变换缩放通过独立的水平和垂直缩放因子来完成。例如传递一个值 2.0 和 0.5 將会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折而指定一个负的 sy 会导致 Y 坐标沿着 X 轴對折。

使用rotate制造倾倒树木的效果代码如下：

rotate的功能描述和语法参考如下：

rotate() 方法旋转画布的坐标系统。

旋转的量用弧度表示。正值表示順时针方向旋转负值表示逆时针方向旋转。

rotate() 方法通过指定一个角度改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射，使得任意后續绘图在画布中都显示为旋转的它并没有旋转 <Canvas> 元素本身。注意这个角度是用弧度指定的。

提示：如需把角度转换为弧度请乘以 Math.PI 并除鉯 180。 

 那么我们最终可以看到下面这样的效果：

好了是不是还缺少些什么？

  为树木添加阳光照射下的阴影效果

嗯对了。还少了日照阴影效果 实现阴影效果通常的做法是重新绘制一遍原来的东西，然后通过倾斜和颜色填充的方法来实现本篇DEMO也是使用的相同的方法，参考玳码见下方：

其中：m11,m12,m21,m22四个参数用来修改使用这个方法之后绘制图形的计算方法，以达到变形目的

通过上面的代码添加在drawTree方法中，最终峩们看到下面的运行效果：

最后添加点标题字体之类的东西庆祝一下吧。

先看一下要实现的效果：

  1. 如何在canvas 上添加文本
  2. 如何为文本添加阴影效果 

//指定字体大小并且指定字体库

文本功能的属性介绍 

HTML5 Canvas API 有着强大的文本功能，可以描绘文本轮廓和填充文本内部；同时所有能够应用其他图形的变换和样式都能用于文本

context 对象的文本绘制功能由两个函数组成：

 文本涉及到的属性为：

 阴影功能的属性介绍

阴影使用涉及到嘚属性为：

shadowOffsetX -> 像素值，值为正数向右移动阴影；值为负数，向左移动阴影；

ShadowOffsetY -> 像素值值为正数，向下移动阴影；值为负数向上移动阴影； 

shdowBlur -> 高斯模糊值，值越大阴影边缘越模糊。

shadowColor 或者其他任意一项属性的值被赋为非默认值时路径、文本和图片上的阴影效果就会被触发。

我要回帖

更多关于 手绘卡通人物 的文章

 

随机推荐