自画像（抽象）

于 2023-12-23 00:00:00 发布
阅读量73 收藏
点赞数
文章标签： canva可画 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pig_pig7/article/details/135130961
版权
本文展示了一个使用HTML5CanvasAPI在浏览器中绘制图形的基本示例，包括圆弧、线段和路径，展示了如何利用JavaScript控制图形绘制过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.beginPath();
cxt.arc(250,200,100,0,2*Math.PI);
cxt.moveTo(180,160);
cxt.lineTo(210,150);
cxt.moveTo(330,160);
cxt.lineTo(300,150);
cxt.moveTo(195,160);
cxt.lineTo(195,180);
cxt.moveTo(315,160);
cxt.lineTo(315,180);
cxt.moveTo(250,200);
cxt.lineTo(250,230);
cxt.lineTo(245,230);
cxt.moveTo(230,260);
cxt.lineTo(270,260);
cxt.moveTo(150,80);
cxt.lineTo(170,150);
cxt.moveTo(250,50);
cxt.lineTo(230,100);
cxt.moveTo(340,150);
cxt.lineTo(360,80);
cxt.stroke();

</script>

</body>
</html>

头秃患者77
关注
p5.js+创意编程-自画像
here_0199的博客
11-04 1315
绘制自画像 确定样式 网格值对于确定图案的坐标点有很大作用，初步在网格纸上手绘自画Q版人物，只进行轮廓的勾画和变形，对于一些细节不进行处理。 编程实现 主要使用的方法： beginShape(); vertex(30, 20); bezierVertex(80, 0, 80, 75, 30, 75); bezierVertex(50, 80, 60, 25, 30, 20); en...
P5.js绘制自画像
weixin_44774211的博客
11-03 1027
P5.js绘制自画像 作品初稿展示 绘制图像 自画像的头发是用一个椭圆和一个长方形构成的 其中椭圆用到了ellipse() ellipse(200,125,160,170); //ellipse(x,y,w,h); 长方形用到的是vertex()函数 其中vertex的几个点要按顺序写，不然出来的图形是不一样的。 vertex(120,130); vertex(120,300); v...
创意自画像
小白
11-09 1586
1.实验内容： 用代码绘制自画像。 2.实验成果： 3.实验步骤： 首先我先定义了一些颜色方便之后使用： 然后初始化一些东西： 首先从最底层开始画，这样之后画的东西会遮挡一部分所以可以不用在边缘太过细致考虑，节省了时间： 首先是尾巴： 然后画脸的轮廓： 身子: 阴影和多余线条： 脸： 手爪： ...
CodeSelfPortrait：使用p5.js的自画像代码
02-09
P5.js的代码自画像 通过阿什利李 总览 这是我使用P5.js自画像的代码 技术细节 修改sketch.js setup（）和draw（）函数以向肖像添加更多功能。
p5.js 码绘第二弹———绘制自画像
weixin_43425465的博客
10-29 764
创作过程 对，一切创作都是要有其灵感及起因（比如要完成实验）的，最初是速写课画了线稿，信誓旦旦地以为可以用p5实现，结果还是被现实打醒，盲猜坐标式画图，还想上天是咋？？ 俺的线稿，真是觉得自己是神仙呢想画这个样子，那最后的成品是什么样呢？？直接放图↓↓↓ 嗯，变大头贴了，真的画不动了（寿终正寝.jpg），配色比较大胆，可能眼睛不太好，需要饱和度高的颜色进行视觉冲击，但真的努力还原了，就觉得还行...
创意编程——自画像
一只黍离
11-03 1187
基于processing实现 目录绘制猫猫粒子交互鼠标（按键与滚轮）绘制色块猫眼样式改变下方按钮功能自动填充更改随即填充范围 **最终效果演示（已把自己脸马赛克）** 绘制 猫猫 这是一个猫猫脸饰，绘制方法如下，eyes用于绘制眼睛，whisker用于绘制胡须： void eyes(){ float r1 = dist(mouseX+(0),mouseY+(-0),width/2-(40)...
自画像
qq_42208866的博客
12-23 217
按照校园卡设计 首先构造出校园卡模型 function card(){ fill(100,255,0); rect(250,250,400,300); fill(0,0,0); rect(250,180,400,70); fill(255,255,255); rect(110,300,100,150); } 再在框里加入人物模型 function human(){ //脸 fill(210,18...
湘美小学美术二年级上册自画像PPT课件.pptx
10-13
孩子们了解到，自画像并非只有一种表现形式，它可以是现实主义的、也可以是超现实的，可以是细腻的、也可以是抽象的。这些多样化的示例激发孩子们的创新精神，鼓励他们认识到艺术创作的无限可能性，进而勇于尝试并...
苏教小学语文三年级上册习作我的自画像PPT学习教案.pptx
10-01
在苏教版小学语文三年级的习作教学中，有一项特别的活动——“我的自画像”。这一活动不仅是一次作文练习，更是一次深刻的自我认知过程。通过细致地描述自己的外貌、性格和爱好，学生们能够在文字中展现独特的自己，...
新人教统编版四年级下册语文 习作：我的“自画像” 教学课件.pptx
10-20
今天，我们要探讨的是新人教统编版四年级下册语文中的一个特别习作主题——“我的‘自画像’”。这个主题不仅是一次文字创作的旅程，更是一次自我认知的探险。 自画像，这一概念源自绘画艺术领域，艺术家们通过画笔...
新人教统编版四年级下册语文 范文2：我的“自画像” 教学课件.pptx
10-20
在新教统编版四年级下册语文的教学课堂上，《我的“自画像”》这篇范文不仅为学生们展示了一幅生动的个性画像，更是一堂精彩纷呈的写作技巧示范课。通过这篇范文的学习，学生们不仅能学会如何描述自己，还能掌握一...
自己的漫画像（美术）.doc
09-12
通过提问与讨论，教师引导学生观察并发现漫画肖像与常规肖像画的不同之处，如夸张的手法、色彩运用等。 在分析漫画特征的环节，教师应详细比较真实照片与漫画肖像之间的差异，突出漫画肖像中的夸张和变形元素。这种...
P5-自画像
qq_42247653的博客
11-04 389
应老师作业要求，通过p5的webeditor完成了一幅自画像（抽象） 本着自己的隐喻想法以及想在代码里实现费娜奇镜的效果，做出了下面的效果 效果图（gif有延迟，动态效果没有很好地体现出来）： 具体实现如下： function setup() { createCanvas(500, 500) } function draw(): 全部实现逻辑在draw内完成，没有进行函数封...
码绘动态创意自画像
TimeTraver2的博客
11-04 239
码绘动态创意自画像使用的基本知识实现代码代码结果 使用的基本知识 random(a,b)\随机生成a,b间的数字 ellipse(m,n,a,b);\以m,n为圆心生成长a宽b的椭圆 stroke();\图形边缘线的颜色; fill();\填充颜色 line(a1,b1,a2,b2);\生成a1,b1至a2,b2的直线 mousePressed();\鼠标按下响应 mouseReleased();...
“码绘” —— 使用P5.JS制作一幅自画像
要变强
10-26 1527
关于自画像，我认为最重要的是要把“我”这个人的特点表现出来。 于是，我的基本想法： 1.是一个长发齐肩的女生，有着中分的刘海 2.是一个追星少女 关于第一点还是比较好实现的，就是外形的塑造。 那么第二点要怎样表现出来呢？ 那当然就是一些周边和应援物了！ 日常生活中，如果我们书包上扣着某明星的徽章，那么我们就会知道“原来她是XXX的粉丝呀！” 所以我选择在自画像的绘制中加入应援棒和周边T恤，这样我的...
Processing实现绘制自画像
weixin_44239354的博客
10-20 6223
关于自画像创作 · 自画像的创作主要分以下几个步骤： 工具准备 轮廓构建 颜色填充 形状修正 背景构建 交互构建 工具准备 关于工具准备是指方便构图而使用的一些代码，比如： println(mouseX+" "+mouseY); 可以比较方便地获取屏幕上的坐标位置，方便修改。 另外由于人脸部分的绘图需要用到曲线（我用的比较多的是贝塞尔曲线），我选择将贝塞尔曲线可视化出来...
Processing编程自画像
QianQing_mio的博客
11-04 5417
Processing绘制自画像 选色构图 在绘制自画像之前首先需要抽象自己的形象，这里 我将长发作为自己的主要抽象特征。 选用的颜色为暖色系，如下图 贝塞尔曲线的使用 在画自画像中多次用到了贝塞尔曲线，这里简单介绍一下用法 用“贝塞尔”工具无论是画直线或是曲线，都非常简单，随手可得。其操作特点是通过用鼠标在面板上放置各个锚点，根据锚点的路径和描绘的先后顺序，产生直线或者是曲线的效果。 我在这里...
p5.js（2）自画像“码绘”
weixin_44350798的博客
11-04 1562
一件编程创意作品，必须实现动态效果或交互效果 作品可以是具象化地描绘自己的形象，也可以是任何形式表现自己的兴趣、追求、特色、经历等
创意编程2-自画像
J_George的博客
11-04 693
实现的效果如下图： 一开始先是对人物的构造： function person(){ fill(205,170,125);//头 rect(250,130,120,90,80); rect(250, 170, 120, 70); circle(305,170,30)//耳朵 circle(190,170,30) rect(250, 220, 4...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值