html学习笔记(11)
2015-08-13 02:13
736 查看
canvas的图形组合
canvas给图形绘制阴影:
<!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(100,100,100,0.5)";
context.shadowBlur = 7.5;
context.translate(0,50);
for(var i=0; i<3;i++){
context.translate(50,50);
createSstar(context);
context.fill();
}
}
function createSstar(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++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
</script>
</head>
<body onload="draw('canvas')">
<!-- 设置阴影
shadowOffsetX 设置阴影的横向位移:
shadowOffsetY 设置阴影的纵向位移
shadowColor : 设置阴影的颜色
shadowBlur : 设置阴影的模糊范围
-->
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
绘制图像:
<!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);
image = new Image();
image.src = "1.jpg";
image.onload = function () {
drawImage(context, image);
}
}
function drawImage(contex, image){
contex.drawImage(image, 0,0, 200,200);
//contex.drawImage(image, 270,270, 380,380, 230,230,100,100);
}
</script>
</head>
<body onload="draw('canvas')">
<!--绘制图形的三种方法:
1. context.drawImage(img,x,y); // x,y画布中的起始坐标
2. context.drawImage(img,x,y,w,h); //w,h 绘制图像的宽高,
3. context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh); sx,sy,画布起始坐标,sh,sw,被复制区域的宽高,
dx,dy 复制后目标图像在画布中的起始坐标,dw,dh,复制后图像的宽高
1-->
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
<!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"); var oprtns = new Array( "source-over", "source-atop", "source-in", "source-out", "destination-over", "destination-atop", "destination-in", "destination-out", "lighter", "copy", "xor" ); i = 3; context.fillStyle = "blue"; context.fillRect(10, 10, 60, 60); context.globalCompositeOperation = oprtns[i]; context.beginPath(); context.fillStyle = "red"; context.arc(60, 60, 30, Math.PI*2, false ); context.fill(); } </script> </head> <body onload="draw('canvas')"> <!--globalCompositeOperation = “” 属性: source-over 默认。在目标图像上显示源图像。 source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。 source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。 destination-over 在源图像上方显示目标图像。 destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。 destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。 lighter 显示源图像 + 目标图像。 copy 显示源图像。忽略目标图像。 xor 使用异或操作对源图像与目标图像进行组合。 --> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
canvas给图形绘制阴影:
<!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(100,100,100,0.5)";
context.shadowBlur = 7.5;
context.translate(0,50);
for(var i=0; i<3;i++){
context.translate(50,50);
createSstar(context);
context.fill();
}
}
function createSstar(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++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
</script>
</head>
<body onload="draw('canvas')">
<!-- 设置阴影
shadowOffsetX 设置阴影的横向位移:
shadowOffsetY 设置阴影的纵向位移
shadowColor : 设置阴影的颜色
shadowBlur : 设置阴影的模糊范围
-->
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
绘制图像:
<!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);
image = new Image();
image.src = "1.jpg";
image.onload = function () {
drawImage(context, image);
}
}
function drawImage(contex, image){
contex.drawImage(image, 0,0, 200,200);
//contex.drawImage(image, 270,270, 380,380, 230,230,100,100);
}
</script>
</head>
<body onload="draw('canvas')">
<!--绘制图形的三种方法:
1. context.drawImage(img,x,y); // x,y画布中的起始坐标
2. context.drawImage(img,x,y,w,h); //w,h 绘制图像的宽高,
3. context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh); sx,sy,画布起始坐标,sh,sw,被复制区域的宽高,
dx,dy 复制后目标图像在画布中的起始坐标,dw,dh,复制后图像的宽高
1-->
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
相关文章推荐
- html 学习笔记(9)
- HTMl小知识
- html学习笔记(8)
- *+html功能
- 用浏览器打开本地html 直接到首页 的解决方法
- html之 《meta》设置缓存
- html 学习笔记(6)
- HTML颜色代码表
- 设置html页面不被浏览器缓存
- html实体转换
- HTML性能优化
- htmlspecialchars输出为空的问题
- HTML标签嵌套规则
- c# 关于HtmlGenericControl 类的笔记(自用)
- HTML中from get post
- html笔记
- HTML判断IE版本,如:[if lte IE 9]……[endif]
- ng-bind-html指令
- HTMLParser半自动解析网页的应用
- innerHTML、innerText和outerHTML、outerText的区别