2、在Canvas上做图

最新推荐文章于 2021-06-10 12:28:54 发布
最新推荐文章于 2021-06-10 12:28:54 发布
阅读量117 收藏
点赞数
分类专栏： html5 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wavaya/article/details/83921221
版权
在Canvas上做图

1、绘制树冠轮廓

[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 drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");

context.save();
context.translate(130,250);

//创建表现树冠的路径
createCanopyPath(context);

//绘制当前路径
context.stroke();
context.restore();
}

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

效果是画出树的外冠


2、描边样式
增加代码
[code]
//创建表现树冠的路径
createCanopyPath(context);
//加宽线条
context.lineWidth=4;
//平滑路径
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';

//绘制当前路径
context.stroke();
[/code]

结果：

3、填充样式
增加填充代码
[code]
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();
//绘制当前路径
context.stroke();
[/code]
结果：

4、填充矩形区域
增加填充矩形区域代码
[code]
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();

//将填充色设为棕色
context.fillStyle="#663300";
//填充用作树干的矩形区域
context.fillRect(-5,-50,10,50);

//绘制当前路径
context.stroke();
[/code]
结果：


5、绘制曲线
添加曲线
[code]
//绘制当前路径
context.stroke();
context.restore();

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

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();
}

[/code]
结果：


2011-5-14 9:13 danny


所有代码清单：
[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 drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");

context.save();
context.translate(130,250);

//创建表现树冠的路径
createCanopyPath(context);
//加宽线条
context.lineWidth=4;
//平滑路径
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';

//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();

//将填充色设为棕色
context.fillStyle= '#663300';
//填充用作树干的矩形区域
context.fillRect(-5,-50,10,50);

//绘制当前路径
context.stroke();
context.restore();

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

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="400">
</canvas>
</body>
</html>
[/code]
娃娃鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5——canvas画布
weixin_33752045的博客
03-31 92
一、基本介绍 1，canvas是画布，可以描画线条，图片等，现代的浏览器大部分都支持。 canvas的width，height默认为300*150，要指定画布大小，不能用css样式的widh，height。只能在html标签中指定，或是用js对canvas对象设置。 &lt;canvas id="wfPicture" width=300px; height=300px;&...
HTML5 Canvas 基础 二
leiyonglin的博客
04-06 3688
继续上一篇 先整理一下代码，接下来会继续 创建一个带有长跑道的树林。 //使用路径 //将绘制方法单独写 function createCanopyPath(context){ //开始 context.beginPath(); context.moveTo(-35,-50); context.lineTo(-15,-80); context.lineTo(-25,-80);
Canvas绘制小树
乱七八糟的
05-08 2687
function createCanopyPath(context) { //绘制树冠 context.beginPath(); context.moveTo(-25, -50); context.lineTo(-10, -80); context.lineTo(-20, -80); context.lineTo(-
html5笔记(5)使用canvas绘图1
liujf
03-17 1059
//在画布上画树 function drawTrails() { var canvas=document.getElementById('trails'); var context=canvas.getContext('2d'); context.save(); context.translate(100,250); //1、路径 //创建表现树冠的路径 createCanopyP
html5学习笔记(6)使用canvas绘图2
liujf
04-14 1124
一、对树干使用背景图片 注意:当图片加载完成时才能在树干上使用 //加载用作树干的图片 var bark = new Image(); bark.src = "bark.jpg"; //当图片加载完成,开始在canvas上绘图 bark.onload = function () { d
html2canvas(1.0.0)
02-22
html2canvas的工作原理是通过读取DOM结构，将HTML元素转换成Canvas上的图形。由于Canvas是基于像素操作的画布，它可以精确地再现HTML元素的样式和布局。这个过程涉及到CSS样式解析、文字渲染、图片加载等多个复杂的...
html2canvas
最新发布
03-01
html2canvas的工作原理是基于HTML5的Canvas API，它解析HTML和CSS，并将其渲染到一个虚拟的Canvas元素上。这个过程包括了对CSS样式的处理、盒模型计算、文本渲染以及图像处理等复杂步骤。由于是在客户端进行操作，...
html2canvas.js
03-11
我是在html2canvas官网http://html2canvas.hertzen.com/下载的js文件 在实际使用的时候发现其init方法只是将document转换为了canvas，并没有保存为图片这一步。 所以我在此基础上进行了扩展，可以调用我封装的方法...
wxml2canvas微信根据wxml绘制海报
03-18
如果有特殊层级，需要单独设置，比如图片盖在背景上，图片的data-index为4。 2.data-multi设置是否一行显示false在一行显示 3.data-change-top设置字在view布局的高度，可根据手机平台设置 部分机型ios高度比android...
div悬浮在canvas上
11-24
如果需要在canvas上进行动态交互，比如点击canvas时检测是否与div重叠，或者让div跟随鼠标移动，我们需要用到JavaScript。例如，可以监听canvas的`mousedown`和`mousemove`事件，然后通过计算鼠标位置与div的位置...
HTML5 之6 __Canvas: 插入图片, 图片加载完时执行回调
热门推荐
daozhongyang的专栏
05-08 1万+
使用canvas API 内置的几个简单命令可以轻松地为canvas 添加图片内容, 应当注意:  必须等到图片完全加载后才能对其进行操作， 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将
1、在页面中加入Canvas
娃娃鸭的专栏
05-14 224
在页面中加入Canvas 画一条直线 1.放置 2.写脚本，代码如下 [code] New Web Project function drawDiagonal() { //取得Canvas元素及其绘图上下文 var canvas=document.getElementById('diagonal'); var c...
用canvas画一个卡通人物!!
laihaodong的博客
05-29 8766
html:&lt;canvas id="canvas" width="650" height="671"&gt;&lt;/canvas&gt;css:canvas {  border: 2px solid #08A573;  background-size: 100% 250%;  background-position: center bottom;}js:var canvas = docume...
html5 电流效果,HTML5 Canvas在目标节点之间流转的闪电/电流
weixin_34305091的博客
06-10 716
JavaScript语言：JaveScriptBabelCoffeeScript确定function Color(min) {min = min || 0;this.r = colorValue(min);this.g = colorValue(min);this.b = colorValue(min);this.style = createColorStyle(this.r, this.g, t...
canvas写仪表盘
java_zhaoyanli的专栏
03-14 3768
electricity.html 电压电流表 #meter_canvas1, #meter_canvas2, #meter_canvas3, #meter_canvas4, #meter_canvas5, #meter_canvas6{ background:url('img/hui.png
电流流动效果实现
ArWen的专栏
03-22 3305
前几天，到航天部实施项目，用户提出需求：希望电路分析后，能显示电路中电流流动效果。 回想起以前电力系统用户希望的电力接线图中潮流的需求，觉得这件事应该做一做了。粗一想，不好做，但深入一想也容易解决，因此，花了一天时间，结果还令人满意。大致应该分以下几步：1.         设计处理对象及其成员与函数2.         解决流动效果3.         根据连接关系与分析结果
利用canvas画布画哆啦A梦
PILIpilipala的博客
08-27 767
<!DOCTYPE html> <html> <head> <title>哆啦A梦</title> <meta charset="utf-8"> </head> <body> <canvas width="400px" height="600px" id="canvas" ></canvas> <
canvas.drawRoundRect 四个角线粗
zhjali123的专栏
11-13 2780
Context： 遇到这个问题，很容易以为四个角线粗了，实际上是直线细了。只需要设置一个padding值就ok了 原因： 假设Paint.setStrokeWidth(2)，如果Canvas的boundary（边界大小）就是canvas.drawRoundRect(rectangle...)的rectangle。线的粗度是2，实际上是一个正方形up:-1,bottom:1。加起来宽度
HTML5 Canvas 2D API 规范详解
2. **GETCONTEXT()方法**：这是Canvas元素的一个方法，用来获取渲染上下文。例如，`context = canvas.getContext('2d')`，这将返回一个2D绘图环境对象，所有绘图操作都在这个对象上进行。 3. **TODATAURL()方法**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值