8-0 笔走龙蛇-Canvas绘图_第1页
8-0 笔走龙蛇-Canvas绘图_第2页
8-0 笔走龙蛇-Canvas绘图_第3页
8-0 笔走龙蛇-Canvas绘图_第4页
8-0 笔走龙蛇-Canvas绘图_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

零号任务笔走龙蛇——Canvas绘图汇报人：xxx时间：2026任务说明01在模块6和模块7设计的博客页面的基础上完成以下操作。（1）应用Canvas绘制简单图形，添加“博客打赏”区域。（2）设置Canvas样式，修改“博客打赏”区域的文字颜色、添加阴影效果等。零号任务任务说明知识准备0201Canvas简介目录02Canvas文字渲染04Canvas图像编辑03Canvas样式1.Canvas简介知识准备（1）Canvas标签与功能<canvas>是HTML5新增标签，可以使用脚本（通常为

JavaScript脚本）在其中绘制图像。它可以制作照片集或相对简单的动画，还可以进行实时视频处理和渲染。（2）Canvas基本代码模板<canvas>是HTML5新增标签，可以使用脚本（通常为

JavaScript脚本）在其中绘制图像。它可以制作照片集或相对简单的动画，还可以进行实时视频处理和渲染。上述代码是Canvas的基本代码模板，需要注意以下几点。在<script>标签中写入JS代码，用来操作“画布”元素。通常将<script>标签放置于HTML文件底部，紧跟<body>的结束标签，以确保页面主要内容在执行JS代码前能更快显示给用户。对于复杂的Canvas应用，建议将JS代码写入单独的.js文件，然后外部引用。这样可以提高代码的复用性和可维护性，同时利用浏览器的缓存机制提高加载效率。id="canvas"：设置<canvas>元素的id属性，通常用于通过JS代码中的DOM操作引用该元素。通过document.getElementById("canvas")可以访问<canvas>标签。当没有设置宽度和高度的时候，Canvas会默认初始化宽度为300像素、高度为150像素。1.

选择节点知识准备（3）使用Canvas绘制简单图形Canvas提供绘制基础形状的功能，如绘制矩形、路径、圆形、椭圆等。使用beginPath()和closePath()可以绘制路径。示例代码如下：1.

选择节点知识准备（4）Canvas坐标系在使用Canvas绘制图形时，形如ctx.lineTo(100,150)中的数字与Canvas坐标系密切相关。Canvas的坐标系以左上角为原点(0,0)，向右为X轴正方向，向下为Y轴正方向。所有Canvas绘图操作都基于这个坐标系。示例代码如下：2.Canvas文字渲染知识准备使用fillText()和strokeText()方法可以在画布上绘制文字；设置字体样式可以使用ctx.font，设置对齐方式可以使用ctx.textAlign。示例代码如下：ctx.font='30pxArial';：这行代码设置所绘制文字的字体样式。30px表示字体大小为30像素，Arial表示字体类型为Arial字体。Arial字体可以免费用于个人学习和教育目的，但在商业使用时需要获得相应许可。ctx.fillText('HelloCanvas',50,50);：在画布上绘制填充文字“HelloCanvas”，“50,50”是文字的起始坐标，表示文字的左上角会出现在(50,50)这个位置。ctx.strokeText('OutlineText',50,90);：在画布上绘制文字“OutlineText”，并用蓝色描边。3.Canvas样式知识准备简单的Canvas样式包括“颜色渐变”“阴影”“透明度”等效果。示例代码如下：4.Canvas图像编辑知识准备Canvas图像编辑是指通过<canvas>元素和JavaScript对图像进行处理和修改的过程。开发者可以在画布上绘制、裁剪、旋转、缩放图像。（1）从零开始创建图片Canvas具备强大且有趣的图像编辑能力。下面以drawImage()函数在画布上绘制图片为例，进行简单介绍。首先，在HTML文件中定义一个<canvas>元素，用于呈现图片，同时准备好一个待绘制的图片元素（这里将其样式设为隐藏，不在页面直接显示）：然后，编写JavaScript代码获取<canvas>元素的绘图上下文，并等待图片加载完成后，使用drawImage()函数将图片绘制到画布指定位置：4.Canvas图像编辑知识准备（2）裁剪并绘制图片使用drawImage()的更多参数可以实现图片的裁剪和绘制。示例代码如下：示例代码运行结果如图所示。ctx.drawImage(img,50,50,100,100,20,20,150,150);：“50,50”是源图片上裁剪区域的左上角坐标，“100,100”是源图片上裁剪区域的宽度和高度，“20,20”指即将裁剪的图片放置到画布上的(20,20)位置，“150,150”表示将裁剪的图片缩放成宽度为150px、高度为150px后再绘制到画布上。任务实现03任务实现01使用AI助手（如通义灵码）创建一个donation.js文件，并利用Canvas绘制一个适当大小的矩形区域，如图所示。02应用Canvas样式知识，为矩形区域添加阴影和背景色，以提升其视觉效果。02通过外部接口引入donation.js文件，通过在HTML文件的<head>或<body>标签中添加<script>标签来引用donation.js，通常将外部脚本文件放置在<body>标签底部，以确保在DOM完全加载后执行。任务实现<!--HTML部分--><canvasid="donationCanvas"width="260"height="300"style="position:absolute;top:300px;left:20px;"></canvas><scriptsrc="donation.js"></script>//donation.js文件window.addEventListener('DOMContentLoaded',()=>{

constdonationCanvas=document.getElementById('donationCanvas');

constctx=donationCanvas.getContext('2d');

//设置背景颜色为奶白色

ctx.fillStyle='#f9f9f9';ctx.fillRect(0,0,donationCanvas.width,donationCanvas.height);

//绘制矩形区域

ctx.beginPath();

ctx.rect(50,50,150,100);//矩形的位置和大小

ctx.fillStyle='#ffffff';//矩形的填充颜色

ctx.fill();

//添加阴影效果

ctx.shadowColor="rgba(0,0,0,0.3)";

ctx.shadowBlur=6;

ctx.shadowOffsetX=4;

ctx.shadowOffsetY=4;

ctx.strokeStyle='#000';

ctx.lineWidth=2;

ctx.stroke();

//添加文字“博客打赏”

ctx.fillStyle='#333';//文字颜色

ctx.font='bold16pxArial';

ctx.textAlign='center';ctx.textBaseline='middle';

ctx.fillText('博客打赏',donationCanvas.width/2,donationCanvas.height/3);});任务实现（1）添加与修改博客功能（2）删除博客功能（3）增加输入框与添加按钮（4）设置

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论