[html] 学习笔记-Canvas图形绘制处理
使用Canvas API 可以将一个图形重叠绘制在另外一个图形上，也可以给图形添加阴影效果。
1、Canvas 图形组合
通过 globalCompositeOperation = 属性 来指定重叠效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
var oprtns = new Array(
"source-atop",
"source-in",
"source-out",
"source-over",
"destination-atop",
"destination-in",
"destination-out",
"destination-over",
"lighter",
"copy",
"xor"
);
i=8;
context.fillStyle = "blue";
context.fillRect(10,10,60,60);
context.globalCompositeOperation = oprtns[i];
context.beginPath();
context.fillStyle = "red";
context.arc(50, 50, 30, 0, Math.PI*2,false);
context.fill();
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
2、给图形绘制阴影
相关属性：shadowOffsetX,shadowOffsetY,shadowOffsetColor,shadowBlur
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(0,0,500,500);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = "rgba(255,100,100,0.9)";
context.shadowBlur = 7.5;
context.translate(0,50);
for(var i=0;i<3;i++){
context.translate(70,100);
create5Start(context);
context.fill();
}
}
function create5Start(context){
var dx = 100;
var dy = 0;
var s = 50;
context.beginPath();
context.fillStyle = "rgba(255,0,0,0.5)";
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI /5 *4;
for(var i=0; i<5;i++){
x = Math.sin(i*dig);
y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
3、使用图像
有3中绘制方式：
context.drawImage(img,x,y)
context.drawImage(img,x,y,w,h)
context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
<html>
<head>
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(0,0,500,500);
image = new Image();
image.src = "1.jpg";
image.onload = function(){
drawImage(context,image);
}
}
function drawImage(context, image){
// context.drawImage(image, 100,100);
// context.drawImage(image, 0,0,200,200);
context.drawImage(image,100,100,200,200,100,100,100,100);
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
[html] 学习笔记-Canvas图形绘制处理的更多相关文章
- Web前端学习笔记——Canvas
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
- [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
- 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^
对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...
- 动画学习之WIFI图形绘制
Android原生动画概述: 对于APP开发中涉及到的一些动画基本上都可以用Android提供的各种原生动画类来实现,所以在学习自定义动画之前首先来对原生动画进行一个基本的了解,这里不详细对每一个原生 ...
- [Android学习笔记]Canvas的使用
Canvas文档 http://developer.android.com/training/index.html 在绘制view时候,重写onDraw(canvas)方法,可能需要在canvas上绘 ...
- canvas图形绘制
前面的话 前面分别介绍了canvas的基础用法和进阶用法,本文将使用canvas的各种语法进行图形绘制 绘制线条 [绘制线条] 下面来尝试绘制一段线条 <canvas id="draw ...
- Cocos2d-x 学习笔记(25) 渲染 绘制 Render
[Cocos2d-x]学习笔记目录 本文链接:https://www.cnblogs.com/deepcho/p/cocos2dx-render.html 1. 从程序入口到渲染方法 一个Cocos2 ...
- 动画学习之Music图形绘制
今天来实现一个类似于网易云音乐类似的动态效果,在用网易云音乐听歌时会有一个类似这样的效果,如下: 而咱们这次要实现的效果如下: music图形的绘制: 在实现动画之前先来将静态的图形绘制出来, 如下: ...
随机推荐
- ZBUS = MQ + RPC
http://git.oschina.net/rushmore/zbus http://my.oschina.net/sbz/blog Readme.md 18.02 KB ZBUS = MQ + ...
- (中等) Hiho 1232 Couple Trees(15年北京网络赛F题)，主席树+树链剖分。
"Couple Trees" are two trees, a husband tree and a wife tree. They are named because they ...
- html-div-css
用CSS实现拉动滚动条时固定网页背景不动 body{ background-image: url(./inc/bgbk.jpg); background-attachm ...
- PageRank在Hadoop和spark下的实现以及对比
关于PageRank的地位,不必多说. 主要思想:对于每个网页,用户都有可能点击网页上的某个链接,例如 A:B,C,D B:A,D C:AD:B,C 由这个我们可以得到网页的转移矩阵 A ...
- 流水线技术原理和Verilog HDL实现（转）
源:流水线技术原理和Verilog HDL实现 所谓流水线处理,如同生产装配线一样,将操作执行工作量分成若干个时间上均衡的操作段,从流水线的起点连续地输入,流水线的各操作段以重叠方式执行.这使得操作执 ...
- Undefined symbols for architecture armv7错误解决方法
Undefined symbols for architecture armv7: "_OBJC_CLASS_$_BriefMainModel", referenced from: ...
- Lambda 可以转换成委托或expression树
1.关于C# Lambda Expressions: 一个Lambda Expression (译为Lambda式) 就是一个包含若干表达式和语句的匿名函数.可以被用作创建委托对象或表达式树类型.所 ...
- 学习tabhost 实现微博的主界面
2014-05-27 吴文付 微博的主界面还是很漂亮的,我们这里来熟悉下tabhost的使用, 网上资料很多,主要参考了:http://blog.csdn.net/shulianghan/articl ...
- PHP读取Excel文件（PHPExcel）
/* * 读取Excel文件 * */ require_once (dirname(dirname(dirname(__FILE__))).'/PHPExcel/PHPExcel ...
- django学习——基础
在ubuntu下, 安装: pip install django / sudo apt-get install python-django 项目与应用 一个project包含多个app,每个app处理 ...