3、在Canvas上做图2

最新推荐文章于 2024-05-10 10:10:22 发布
最新推荐文章于 2024-05-10 10:10:22 发布
阅读量115 收藏 1
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wavaya/article/details/83935599
版权
1、提取成函数

drawTree
[code]
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);

var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);

createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();

context.fillStyle="#339900";
context.fill();

}
[/code]
添加放大的树全部代码：
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>drawTree</title>
</head>
<script>
function createCanopyPath (context) {
//绘制树冠
context.beginPath();

context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
//树的顶点
context.lineTo(0,-140);

context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);

//连接起点，闭合路径
context.closePath();
}

function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);

var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);

createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();

context.fillStyle="#339900";
context.fill();

}

function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");

context.save();

context.translate(130,250);
drawTree(context);
context.restore();

//保存canvas的状态并绘制路径
context.save();

context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();

context.translate(-10,350);
context.beginPath();

//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);

//第二条曲线
context.quadraticCurveTo(310,-250,410,-250);

//使用棕色的粗线条来绘制路径
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();

//恢复之前的canvas状态
context.restore();

}

window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
[/code]

结果：


2、加阴影
在DrawTree中加入画阴影的代码：
[code]
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);

var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);

createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();

context.fillStyle="#339900";
context.fill();

context.save();
//X值随着Y值的增加面增加，借助拉伸变换，可创建一棵作阴影的树
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向
context.scale(1,0.6);

context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();

context.restore();
}
[/code]
结果：


3、加入文本
加入如下代码
[code]
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
context.fillText('Happy Trails!',200,60,400);
context.restore();

context.save();
[/code]
显示结果：


4、应用阴影，字体
添加如下代码：
[code]
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
//加阴影
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;

context.fillText('Happy Trails!',200,60,400);
context.restore();

[/code]
结果：

全部代码：
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>drawTree</title>
</head>
<script>
function createCanopyPath (context) {
//绘制树冠
context.beginPath();

context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
//树的顶点
context.lineTo(0,-140);

context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);

//连接起点，闭合路径
context.closePath();
}

function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);

var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);

createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();

context.fillStyle="#339900";
context.fill();

context.save();
//X值随着Y值的增加面增加，借助拉伸变换，可创建一棵作阴影的树
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向
context.scale(1,0.6);

context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();

context.restore();
}

function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
//加阴影
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;

context.fillText('Happy Trails!',200,60,400);
context.restore();

context.save();

context.translate(130,250);
drawTree(context);
context.restore();

//保存canvas的状态并绘制路径
context.save();

context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();

context.translate(-10,350);
context.beginPath();

//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);

//第二条曲线
context.quadraticCurveTo(310,-250,410,-250);

//使用棕色的粗线条来绘制路径
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();

}

window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
[/code]
2011-5-14 11:26 danny
娃娃鸭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas在图片上绘制图形
王等等csdn的博客
08-26 1326
canvas在图片上绘制图形
小程序图表 f2-canvas
qq_42180156的博客
10-29 377
官网地址所有图表 | F2The Grammar of Graphics in JavaScripthttps://f2.antv.vision/zh/examples/gallery/ //绘制直流电压，电流图 drawCurrenVoltage:function(id,data) { var that = this var dataArr = [] var listLength = 0 var tempDataX=that.data.tempDataX
HTML5 Canvas 基础 二
leiyonglin的博客
04-06 3685
继续上一篇 先整理一下代码，接下来会继续 创建一个带有长跑道的树林。 //使用路径 //将绘制方法单独写 function createCanopyPath(context){ //开始 context.beginPath(); context.moveTo(-35,-50); context.lineTo(-15,-80); context.lineTo(-25,-80);
HTML5 Cavas 第三篇
-北纬29度半
02-08 1087
耽搁了好长时间,因为中间有过年和一些七七八八的事情.在看了html5关于cavas的讲解,再归纳一下没有提到的一些部分.由于Cavas上我自己用到的部分也很少,所以只能把书上提到的大致写写.     前一篇写到了Cavas的曲线,这一篇从在canvas显示图片走起.   3.1 图像     代码:加载图像 //加载图片new.jpg var img = new Image(); im
canvas实现在图片上画框
qq_42491673的博客
09-07 879
【代码】canvas实现在图片上画框。
2、在Canvas上做图
娃娃鸭的专栏
05-15 115
在Canvas上做图 1、绘制树冠轮廓 [code] drawTree function createCanopyPath (context) { //绘制树冠 context.beginPath(); context.moveTo(-25,-50); context.lineTo(-10,-80);...
android canvas实现在图片上画图
olpf1128的博客
10-31 4570
先上效果图： 首先要注意用到两个bitmap，一个用来承载所有画图 ，另一个用来画背景图 screenWidth = getWindowManager().getDefaultDisplay().getWidth(); screenHeight = getWindowManager().getDefaultDisplay().getHeight();
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
weixin_65793170的博客
05-10 2644
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
html2canvas(1.0.0)
02-22
html2canvas的工作原理是通过读取DOM结构，将HTML元素转换成Canvas上的图形。由于Canvas是基于像素操作的画布，它可以精确地再现HTML元素的样式和布局。这个过程涉及到CSS样式解析、文字渲染、图片加载等多个复杂的...
Canvas彩色发光3D线条动画特效
07-24
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上直接用JavaScript进行2D和3D图形绘制。在这个“Canvas彩色发光3D线条动画特效”中，我们将深入探讨如何利用Canvas API来创建复杂的视觉效果。 首先，...
div悬浮在canvas上
11-24
如果需要在canvas上进行动态交互，比如点击canvas时检测是否与div重叠，或者让div跟随鼠标移动，我们需要用到JavaScript。例如，可以监听canvas的`mousedown`和`mousemove`事件，然后通过计算鼠标位置与div的位置...
wxml2canvas微信根据wxml绘制海报
03-18
如果有特殊层级，需要单独设置，比如图片盖在背景上，图片的data-index为4。 2.data-multi设置是否一行显示false在一行显示 3.data-change-top设置字在view布局的高度，可根据手机平台设置 部分机型ios高度比android...
html2canvas
03-01
html2canvas的工作原理是基于HTML5的Canvas API，它解析HTML和CSS，并将其渲染到一个虚拟的Canvas元素上。这个过程包括了对CSS样式的处理、盒模型计算、文本渲染以及图像处理等复杂步骤。由于是在客户端进行操作，...
canvas 在其他画好的上面继续画_Canvas绘制、合并、保存图像以及存在的问题
weixin_36233098的博客
12-29 1373
最近帮学校官方微信做了一个头像合成的小页面，用户可以自己选择本地照片，上传并裁剪后，与学校logo合成最终图片，用户可以长按保存到本地，同样，我也把他放到了GitHub，效果大概下面这个样子。因为有官方微信的推广，点击量分分钟过5千，虽然是个很一般的东西，自己写的代码也很一般，都是看着朋友圈很多人用着通过自己写的制作器做的头像，感觉很棒哦。test.gif这个页面全部在前端完成，因为HTML5的强...
html css js网页设计
07-12
HTML、CSS和JavaScript是构建网页和网站的基本技术，它们共同工作来创建和设计用户界面。下面是关于这三种技术的详细介绍： ### HTML (HyperText Markup Language) - **定义**：HTML是构建网页内容的标准标记语言。 - **作用**：用于创建网页的结构和内容，如段落、链接、图片、表格等。 - **语法**：使用标签（如 `<p>`, `<div>`, `<a>`, `<img>` 等）来定义网页元素。 ### CSS (Cascading Style Sheets) - **定义**：CSS是一种样式表语言，用于描述HTML文档的呈现方式。 - **作用**：用于设置网页的布局、颜色、字体和其他视觉元素。 - **语法**：通过选择器（如 `p`, `.myclass`, `#myid` 等）应用样式规则。 ### JavaScript - **定义**：JavaScript是一种脚本语言，通常用于网页上实现交互功能。 - **作用**：允许网页与用户进行交互，如响应用户操作、动态更新内容、动画效果等。 - **语法**：Java
2023年数字乡村建设解决方案PPT(34页).pptx
最新发布
07-12
数字乡村建设解决方案旨在通过数字化转型促进乡村振兴和农业农村现代化。该方案强调了数字乡村建设的战略机遇，以"1+3+5"工程为总体框架，即一个大数据中心、三大服务平台和五类主题应用。方案着重于乡村治理、产业发展和公共服务三大问题，通过完善治理体系、升级治理能力、强化产业链条和改善资源配置来推动乡村全面振兴。 方案中提出的数字乡村大数据中心是信息资源的集散地，依托大数据、AI、物联网等新技术，实现数据驱动的决策支持。三大服务平台包括产业服务、民生服务和治理服务，旨在提升农业生产智能化、经营网络化，同时优化乡村治理结构和提升服务效能。五类主题应用覆盖生产管理、流通营销、行业监管、公共服务和乡村治理，通过具体业务应用体系，实现农业全产业链的数字化管理和服务。 预期建设效益包括通过信息技术促进乡村优势产业发展，形成城郊融合型数字乡村治理新模式，以及创新服务方式，提升服务能力，保障农民权益。整体而言，该方案以数字化为手段，推动乡村经济、治理、文化等多方面的全面升级和发展。
脉冲强光技术在灭菌烧结固化应用解决方案
07-12
脉冲强光技术在灭菌烧结固化应用解决方案，已经得到厂家授权，可以对外公示。
python tkinter 在canvas上显示图片
06-11
可以使用Tkinter中的Canvas组件来显示图片，下面是一个简单的示例...然后，我们使用Canvas的create_image()方法在Canvas上创建了一个图像对象，并将其显示出来。 你可以根据自己的需要调整Canvas的大小和图片的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值