html5——canvas画布
一、基本介绍
1，canvas是画布，可以描画线条，图片等，现代的浏览器大部分都支持。
canvas的width，height默认为300*150，要指定画布大小，不能用css样式的widh，height。只能在html标签中指定，或是用js对canvas对象设置。
<canvas id="wfPicture" width=300px; height=300px;>
</canvas>
2，canvas的Path描画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#wfPicture{
border: 1px solid;
}
</style>
<script>
function drawWorkflowPicture(){
var canvas = document.getElementById("wfPicture");
console.log("canvas:",canvas);
var ctx = canvas.getContext("2d"); // 保存平移前的状态
ctx.save(); // 平移到 100, 100
ctx.translate(100, 100); // 创建树冠
createCanopyPath(ctx); // 描画当前路径
ctx.stroke(); // 恢复状态到平移前
ctx.restore();
} function createCanopyPath(ctx){
ctx.beginPath(); // 画一个树冠底部为50px，每层高30px，共3层的树冠
// 树冠的顶点
ctx.moveTo(0,0);
// 左边的点
ctx.lineTo(-15, 30);
ctx.lineTo(-5, 30);
ctx.lineTo(-20, 60);
ctx.lineTo(-10, 60);
ctx.lineTo(-25, 90); // 右边的点
ctx.lineTo(25, 90);
ctx.lineTo(10, 60);
ctx.lineTo(20, 60);
ctx.lineTo(5, 30);
ctx.lineTo(15, 30); ctx.closePath();
} window.addEventListener("load", function(){
drawWorkflowPicture();
});
</script>
</head>
<body>
<canvas id="wfPicture" width=300px; height=300px;>
</canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#wfPicture{
border: 1px solid;
}
</style>
<script>
function drawWorkflowPicture(){
var canvas = document.getElementById("wfPicture");
console.log("canvas:",canvas);
var ctx = canvas.getContext("2d"); // 保存平移前的状态
ctx.save(); // 平移到 100, 100
ctx.translate(100, 100); // 创建树冠
createCanopyPath(ctx); //线条宽度
ctx.lineWidth=4; //结合点平滑效果 "bevel|round|miter"; bevel：斜角 miter：尖角（默认）
ctx.lineJoin="round"; // 线条样式棕色
ctx.strokeStyle="#663300"; // 描画当前路径
ctx.stroke(); // 用绿色填充闭合路径
ctx.fillStyle="#339900";
ctx.fill(); // 填充色恢复成棕色
ctx.fillStyle="#663300"; // 填充树干
ctx.fillRect(-5,90,10,50); // 恢复状态到平移前
ctx.restore(); // 保存状态，绘制曲线
ctx.save(); ctx.translate(0, 350); // 画路径前，这一句话必须有
ctx.beginPath();
//小路左下的起点
ctx.moveTo(-10, 0);
// 100,20 为第一条曲线的控制点。270, -200为终点
ctx.quadraticCurveTo(100, 20, 270, -200);
// 400, -340 为第二条曲线的控制点。
//上一条曲线的270, -200为第二条曲线的起点，510, -270为终点
ctx.quadraticCurveTo(400, -340, 510, -270);
ctx.strokeStyle="#663300";
ctx.lineWidth=20;
ctx.stroke(); // 恢复状态到平移前
ctx.restore(); //用背景图替换掉树干的颜色
var backImg = new Image();
backImg.src="trunk.jpg";//
// 保证图片加载完后，再描画
backImg.onload=function(){
//这里是异步调用，里面的坐标最好用绝对坐标，不要translate
// 不然里面和外面的代码会互相干扰
ctx.drawImage(backImg,95,190,10,50);
};
} function createCanopyPath(ctx){
ctx.beginPath(); // 画一个树冠底部为50px，每层高30px，共3层的树冠
// 树冠的顶点
ctx.moveTo(0,0);
// 左边的点
ctx.lineTo(-15, 30);
ctx.lineTo(-5, 30);
ctx.lineTo(-20, 60);
ctx.lineTo(-10, 60);
ctx.lineTo(-25, 90); // 右边的点
ctx.lineTo(25, 90);
ctx.lineTo(10, 60);
ctx.lineTo(20, 60);
ctx.lineTo(5, 30);
ctx.lineTo(15, 30); ctx.closePath();
} window.addEventListener("load", function(){
drawWorkflowPicture();
});
</script>
</head>
<body>
<canvas id="wfPicture" width=500px; height=500px;>
</canvas>
</body>
</html>
3，文字描画
1）空心文字
<!DOCTYPE html>
<html>
<body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("w3school.com.cn",10,50); ctx.font="30px 微软雅黑";
ctx.strokeStyle="#000";
ctx.strokeText("w3school.com.cn",10,80);
</script> </body>
</html>
4，填充
1）直接填充矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
2）填充闭合的path
// 描画当前路径
ctx.stroke(); // 用绿色填充闭合路径
ctx.fillStyle="#339900";
ctx.fill();
5，旋转
图片旋转一定要等图片加载完成才可以。
//旋转图片
var backImg2 = new Image();
backImg2.src="road2.jpg";//
backImg2.onload=function(){
//这里是异步调用，里面的坐标最好用绝对坐标，不要translate
// 不然里面和外面的代码会互相干扰,下面渐变色的颜色，暂时注释
ctx.save();
ctx.translate(0,0);
ctx.rotate(0.57);
ctx.drawImage(backImg2, 0,0,100,100);
ctx.restore();
};
6，支持对像素的操作
canvas上的每个像素都可以取得和设定值，这提供了极大的灵活性。
主要通过getImageData，putImageData，createImageData来完成。
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);
二、一个综合的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#wfPicture{
border: 1px solid;
}
</style>
<script>
function drawWorkflowPicture(){
var canvas = document.getElementById("wfPicture");
console.log("canvas:",canvas);
var ctx = canvas.getContext("2d"); // 画第一棵树
ctx.save();// 保存平移前的状态
ctx.translate(100, 100);// 平移到 100, 100
drawTree(ctx);//画树
ctx.restore();// 恢复状态到平移前 // 画第一棵树
ctx.save();// 保存平移前的状态
ctx.translate(250, 250);// 平移到 100, 100 ctx.scale(2,2);
drawTree(ctx);//画树 ctx.restore();// 恢复状态到平移前 //用图片画小路
var backImg = new Image();
backImg.src="road.jpg";//
// 保证图片加载完后，再描画
backImg.onload=function(){
//这里是异步调用，里面的坐标最好用绝对坐标，不要translate
// 不然里面和外面的代码会互相干扰,下面渐变色的颜色，暂时注释
ctx.save();
ctx.translate(0, 350);
drawRoad(ctx, backImg);
ctx.restore();
}; // 添加文字标题
ctx.save();
ctx.font="60px impact";
ctx.fillStyle="#996600";
ctx.textAlign="center";
// 添加文字阴影
ctx.shadowColor="rgba(0,0,0,0.2)";
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=-10;
ctx.shadowBlur=2;
ctx.fillText("Happy Trees!", 200, 60); ctx.restore();
} // 画树
function drawTree(ctx){
ctx.save();
// 画树的阴影
// 下面这一步是因为我画树是以树顶端作为原点0,0来画的，有偏移，必须这样矫正。!doctype
// 正确的做法，还是应该以树根作为基准点，这样树的倾斜才会以根部为基础。
ctx.translate(Math.tan(0.5) * 140 * 0.6 -4, 140 * 0.4);
ctx.transform(1,0,-0.5,1,0,0);
ctx.scale(1,0.6);
ctx.fillStyle="rgba(0,0,0,0.2)";
ctx.fillRect(-5,90,10,50);
ctx.fill(); createCanopyPath(ctx);
ctx.fill();
ctx.restore(); // 创建树干用渐变色
var trunkGradient = ctx.createLinearGradient(-5, 90, 5, 90);
trunkGradient.addColorStop(0, '#663300');
trunkGradient.addColorStop(0.4, '#996600');
//树干最右边，颜色最深
trunkGradient.addColorStop(1, '#552200');
ctx.fillStyle=trunkGradient;
ctx.fillRect(-5,90,10,50); //创建垂直渐变，用作树冠在树干上的投影
var canopyShadow = ctx.createLinearGradient(-5, 90, -5, 140);
canopyShadow.addColorStop(0, 'rgba(0,0,0,0.5)');//黑色半透明
canopyShadow.addColorStop(0.2, 'rgba(0,0,0,0.0)');//全透明
ctx.fillStyle=canopyShadow;
ctx.fillRect(-5,90,10,50); // 创建树冠
createCanopyPath(ctx); //线条宽度
ctx.lineWidth=4;
//结合点平滑效果 "bevel|round|miter"; bevel：斜角 miter：尖角（默认）
ctx.lineJoin="round";
// 线条样式棕色
ctx.strokeStyle="#663300";
// 描画当前路径
ctx.stroke();
// 用绿色填充闭合路径
ctx.fillStyle="#339900";
ctx.fill(); // 画树的阴影
// 下面这一步是因为我画树是以树顶端作为原点0,0来画的，有偏移，必须这样矫正。!doctype
// 正确的做法，还是应该以树根作为基准点，这样树的倾斜才会以根部为基础。
// ctx.translate(Math.tan(0.5) * 140 * 0.6, 140 * 0.4);
// ctx.transform(1,0,-0.5,1,0,0);
// ctx.scale(1,0.6);
// ctx.fillStyle="rgba(0,0,0,0.2)";
// ctx.fillRect(-5,90,10,50);
// ctx.fill();
//
// createCanopyPath(ctx);
// ctx.fill();
} // 画树冠
function createCanopyPath(ctx){
ctx.beginPath(); // 画一个树冠底部为50px，每层高30px，共3层的树冠
// 树冠的顶点
ctx.moveTo(0,0);
// 左边的点
ctx.lineTo(-15, 30);
ctx.lineTo(-5, 30);
ctx.lineTo(-20, 60);
ctx.lineTo(-10, 60);
ctx.lineTo(-25, 90); // 右边的点
ctx.lineTo(25, 90);
ctx.lineTo(10, 60);
ctx.lineTo(20, 60);
ctx.lineTo(5, 30);
ctx.lineTo(15, 30); ctx.closePath();
} function drawRoad(ctx, backImg){
// 画路径前，这一句话必须有
ctx.beginPath();
//小路左下的起点
ctx.moveTo(-10, 0);
// 100,20 为第一条曲线的控制点。270, -200为终点
ctx.quadraticCurveTo(100, 20, 270, -200);
// 400, -340 为第二条曲线的控制点。
//上一条曲线的270, -200为第二条曲线的起点，510, -270为终点
ctx.quadraticCurveTo(400, -340, 510, -270);
ctx.strokeStyle= ctx.createPattern(backImg, 'repeat'); // "#663300";
ctx.lineWidth=20;
ctx.stroke();
} window.addEventListener("load", function(){
drawWorkflowPicture();
});
</script>
</head>
<body>
<canvas id="wfPicture" width=400px; height=600;>
</canvas>
</body>
</html>
html5——canvas画布的更多相关文章
- html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
- HTML5 Canvas 画布
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属 ...
- HTML5 canvas画布写炫彩动态的倒计时效果
html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...
- css总结19:HTML5 Canvas(画布)
1 <canvas> 标签定义图形,比如图表和其他图像. 例1:简单使用: <canvas id="Canva" width="200" h ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
随机推荐
- spring整合ssmXML版
以下是一个简单的ssm项目:如果中途报错,肯定是tomcat配置或者数据库配置有问题,在程序中注意将包名等配置换成自己的.数据库表需要提前建好,并加入数据,注意表结构要和实体对象对应. 1.开发条件: ...
- SqlDataAdapter更新数据
插入.更新和删除的排序 在许多情况下,以何种顺序向数据源发送通过 DataSet 作出的更改是相当重要的. 例如,如果已更新现有行的主键值并且添加了具有新主键值的新行, 则务必要在处理插入之前处理更新 ...
- android studio 代码模板
作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-mail: 313134555 @qq.com android studio 代码模板 an ...
- 搞IT，算法编程不错的学习网址 ＆ 一些专栏博客大神的地址（汇总）
博客专栏大神 王晓华(算法的乐趣) 算法系列:http://blog.csdn.net/orbit/article/category/830251 PostgreSQL深入理解内核系列:http:// ...
- centos7环境下对防火墙的操作
我是运行了systemctl stop firewalld.service && systemctl disabl e firewalld.service命令于是显示 [root@in ...
- xtrabackup备份MySQL并主从同步
为什么要使用xtarbackup? mysqldump备份数据库的时候,会锁库锁表,导致业务服务的暂时停滞,数据库数量小还没有感觉,当数据超过几个G的时候,使用mysqldump会严重影响服务器性能, ...
- 读写锁--DEMO
package com.demo.read.write.lock; import java.util.HashMap; import java.util.Map; import java.util.c ...
- How to modify analog output range of Arduino Due
Voltage Translation for Analog to Digital Interface ADC How to modify analog output range of Arduino ...
- 关于php开发中的字符编码问题总结的几个要点
用php这么久,今天终于要彻底总结下php乱码问题,因为实在是吃过不少亏啊 1:header("content-type:text/html;charset=utf-8")或者&l ...
- springmvc 动态加载配置文件
<import resource="classpath:config/spring-profile-properties.xml" /> <context:pro ...