canvas 表情包,

　　实习期间让我用帆布画一个表情，比较简单，话不多说直接上代码：

　　body div id= canvas-warp canvas id= canvas style= display:block；边距：200像素自动；你的浏览器居然不支持画布！/canvas/div脚本窗口。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=400 canvas . height=400//获取上下文var context=画布。获取上下文(“2d”)；//用于画有填充色圆的函数参数分别为圆心坐标，半径，起始与终止位置，线颜色，填充颜色函数drawCircle(x2，y2，r2，a2，b2，lineColor，fill color){ context。begin path()；context.arc(x2，y2，r2，a2，b2 * Math .PI)；语境。笔画样式=线条颜色；语境。填充样式=填充颜色；语境。fill()；//确认填充语境。笔画()；};//用于画圆弧函数默认线条为黑色无填充参数分别为：圆心x坐标，圆心y坐标，半径，开始位置，终止位置函数drawsArc(x，y，r，l1，L2){ context。begin path()；context.arc(x，y，r，l1 *数学。圆周率，l2 *数学.)；context . stroke style= black context。笔画()；};//用于画眼睛的函数函数darwEyes(x1，y1，a1，b1) { //参数分别为椭圆圆心位置长轴短轴语境。stroke style= # 754924 param ellipse(上下文，x1，y1，a1，B1)；//椭圆函数para ellipse(context，x，y，a，b) { //使每次循环所绘制的路径（弧线)接近一像素定义变量步长=(a b)？1/a:1/b；语境。begin path()；context.moveTo(x a，y)；//从椭圆的左端点开始绘制for(var I=0；i 2 *数学；i=step) { //参数为我，表示度数（弧度)context.lineTo(x a * Math.cos(i)，y b * math。sin(I))；}上下文。关闭路径()；context . fill style= # 754924 context。fill()；语境。笔画()；};};//脸drawCircle(200，200，200，0，2， #EEE685 ， # fcf 200 )；//左眼语境。stroke style= # 754924 darwe yes(116，130，18，25)；drawCircle(110，127，12，0，2， #754924 ， # f5f 5 F5 )；//右眼达威耶斯(296，130，18，25)；drawCircle(290，127，12，0，2， #754924 ， # f5f 5 F5 )；//左眉毛drawsArc(100，100，50，1.3，1.7)；//右眉毛drawsArc(300，100，50，1.3，1.7)；//嘴巴drawsArc(200，120，180，0.3，0.7)；}/脚本/正文效果图

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。