canvas实例
来源：互联网 发布：淘宝积分怎么领取 编辑：程序博客网 时间：2024/05/10 21:48
function draw(id){
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');//getContext来获取图形上下文。
context.fillStyle = "#EEEEFF";//指定颜色值 context取得上下文 fillStyle填充的样式
context.fillRect(0,0,400,300);//填充矩形和绘制矩形边框
context.fillStyle = "red";//fillStyle填充的样式
context.strokeStyle = "blue";//strokeStyle图形边框的样式。在该属性中填入边框的颜色值
context.lineWidth=1;//设定图形边框的宽度
context.fillRect(50,50,100,100);//填充矩形和绘制矩形边框
context.strokeRect(50,50,100,100);//填充矩形和绘制矩形边框
}
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas元素示例</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
正方形绘制显示如下：
<script>
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0,0,400,300);
var n =0;
for(var i = 0 ;i < 10;i++ ){
context.beginPath(); //开始创建路径。在几次循环中创建路径的过程中，每次开始创建都要调用beginPahth函数
context.arc(i * 25,i * 25,i * 10,0,Math.PI * 2,true);//创建圆形路径括号中分别是：X轴，Y轴,圆形半径，开始角度，结束角度，顺时针执行
context.closePath();//关闭路径
context.fillStyle = 'rgba(255,0,0,0.25)';//设定样式
context.fill();//进行绘图（填充图形）
}
}
</script>
</head>
<body onload="draw('canvas');">
圆形绘制
<h1>canvas圆形示例。想要绘制其他路径，需要使用路径。同样，绘制开始时还是要去的图形上下文，然后执行如下步骤：
1、开始创建路径
2、创建图形的路径
3、路径创建完成后，关闭路径
4、设定绘制样式，调用绘制方法，绘制路径
</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0,0,400,300);
var n =0;
for(var i = 0 ;i < 10;i++ ){
//context.beginPath(); //开始创建路径。在几次循环中创建路径的过程中，每次开始创建都要调用beginPahth函数
context.arc(i * 25,i * 25,i * 10,0,Math.PI * 2,true);//创建圆形路径括号中分别是：X轴，Y轴,圆形半径，开始角度，结束角度，顺时针执行
//context.closePath();//关闭路径
context.fillStyle = 'rgba(255,0,0,0.25)';//设定样式
context.fill();//进行绘图（填充图形）
}
}
</script>
</head>
<body onload="draw('canvas');">
重叠绘制
<h1>canvas圆形示例。想要绘制其他路径，需要使用路径。同样，绘制开始时还是要去的图形上下文，然后执行如下步骤：
1、开始创建路径
2、创建图形的路径
3、路径创建完成后，关闭路径
4、设定绘制样式，调用绘制方法，绘制路径
</h1>
<h2>这里，我们来介绍一下在循环时的具体绘制过程<br/>
1、创建并且绘制第一个圆。
2、创建第二个圆。这事，因为没有把第一个绘制圆的路径给关闭掉，所以第一个圆的路径也保留着。
绘制第二个圆的时候，第一个圆会根据该路径重复绘制，第二圆只绘制一次，而第一个圆绘制了两次。
3、创建第三圆。绘制时，第三个圆绘制一次，第二个圆绘制两次，第一个圆绘制三次。
3、同上....
</h2>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
<script>
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect (0,0,400,300);
//图形绘制
context.translate(200,50);
for(var i=0;i<50;i++){
context.translate(25,25);//平移
context.scale(0.95,0.95);//放大
context.rotate(Math.PI/10);//旋转
create5Star(context);
context.fill();
}
}
function create5Star(context)
{
var n = 0;
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');">
<h1>canvas左边变换与路径的结果使用</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
/*定义颜色*/
var colors = ["red","orange","yellow","green","blue","navy","purple"];
//定义线宽
context.lineWidth= 10;
context.transform(1,0,0,1,100,0)
//循环绘制圆弧。
for(var i=0;i<colors.length;i++)
{
//定义每次向下移动10个像素的变换矩阵
context.transform(1,0,0,1,0,10);
//设定颜色
context.strokeStyle=colors[i];
//绘制圆弧
context.beginPath();
context.arc(50,100,100,0,Math.PI,true);
context.stroke();
}
}
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas左边变换与路径的结果使用</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
<script>
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
/*绘制红色长方形*/
context.strokeStyle = "red";
context.strokeRect(30,10,60,20);
/*绘制顺时针旋转45度后的蓝色长方形 */
/*绘制45度圆弧*/
var rad = 45 * Math.PI/180;
/*定义顺时针旋转45度的变换矩阵*/
context.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(rad),
Math.cos(rad),0,0);
/*绘制图形*/
context.strokeStyle="blue";
context.strokeRect(30,10,60,20);
/*绘制放大2.5倍的绿色长方形*/
/*定义放大2.5倍的变换矩阵*/
context.setTransform(2.5,0,0,2.5,0,0);
/*绘制图形*/
context.strokeStyle="green";
context.strokeRect(30,10,60,20);
/*将坐标原点向右移动40像素，向下移动80像素后绘制灰色长方形*/
/*定义将坐标原点向右移动40像素，向下移动80像素的矩阵*/
context.setTransform(1,0,0,1,40,80);
/*绘制图形*/
context.strokeStyle ="gray";
context.strokeRect(30,10,60,20);
}
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas使用setTransform方法绘制变形图形</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
<script>
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var oprtns = new Array(
"source-atop",//只绘制新图形中原有图形重叠的部分与未被重叠覆盖的 原有图形，新图形的其他部分变成透明。
"source-in",//新图形与原有图形作IN运算，只显示新图形中与原有图形相重叠的部分，新图形与原有图形的其他部分均变成透明。
"source-out",//新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分，新图形与原有图形的其他部分均编程透明
"source-over",//为globalCompositeOperation属性的默认值，表示新图形覆盖在原有图形之上。
"destination-atop",//只绘制原有图形中被新图形重叠覆盖的部分与新图形的其他部分，原有图形中的其他部分变成透明，不绘制新图形中原有图形相重叠的部分。
"destination-in",//原有图形与新图形作in运算，只显示原有图形中与新图形相重叠的部分，新图形与原有图形的其他部分均变成透明。
"destination-out",//原有图行与新图形out运算，只显示原有图形中与新图形不重叠的部分，新图形与原有图形的其他部分均变成透明。
"destiantion-over",//表示在原有图形之下绘制新图形
"lighter",//原有图形与新图形均绘制，重叠部分做加色处理
"copy",//只绘制新图形，原有图形中未与新图形重叠的部分变成透明。
"xor"//只绘制新图形中与原有图形不重叠的部分，重叠部分变成透明
);
i=8; //读者可自行修改该参数来显示想要查看的组合效果
//绘制原有图形（蓝色长方形）
context.fillStyle = "blue";
context.fillRect(10,10,60,60);
//设置组合方式，从组合的参数数值中挑选组合方式，此处因为i是8，
//所以选择oprtns组合中第9（数组从0开始计算）个组合方式linghter*/
context.globalCompositeOperation=oprtns[i];
//设置新图形（红色圆形）
context.beginPath();
context.fillStyle ="red";
context.arc(60,60,30,0,Math.PI*2,false);
context.fill();
}
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas使用setTransform方法绘制变形图形</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
<script>
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0,0,400,300);
image = new Image();
image.src ="../html5/images/bg.png";
image.onload=function(){
drawImg(context,image);
};
}
function drawImg(context,image)
{
var i = 0;
//首先调用该方法绘制原始图像
context.drawImage(image,0,0,100,100);
//绘制将局部区域进行放大后的图像
context.drawImage(image,23,5,57,80,110,0,100,100);
}
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas局部放大</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
<script>
function draw(id)
{
var image = new Image();
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
image.src="../html5/images/bg.png";
image.onload = function()
{
//创建填充样式，全方向平铺
var ptrn=context.createPattern(image,'repeat');
//指定填充样式
context.fillStyle=ptrn;
//填充画布
context.fillRect(0,0,400,300);
}
}
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas图像平铺</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
- canvas实例
- Android Canvas组件实例
- Javascript canvas画图实例
- HTML5 canvas 小实例
- HTML5 Canvas实例画板
- HTML5 canvas 实例
- Canvas 效果实例
- canvas-实例时钟
- HTML5 canvas入门实例
- （十一）Canvas 实例
- HTML5 Canvas 绘制路径实例
- Canvas、Path 和 Paint 实例
- 第一个Canvas实例-钟表
- HTML5 05 Canvas实例 闹钟
- HTML5 06 canvas实例 画图板
- HTML的一个Canvas实例
- 使用canvas绘制气球实例
- HTML5 Canvas刮刮卡效果 实例
- 利用反射动态代理
- 深入理解Java之jvm启动流程
- 蓝桥杯 历届试题 危险系数
- PAT L1-019. 谁先倒
- 【51NOD 1558】树中的配对
- canvas实例
- KNN算法及python实现
- 2017华为暑期实习生校招笔试
- mock页面中的WebSocket
- 2015最新34期php培训教程[基础就业班带微信开发Discuz二次开发]
- 顺序表应用6：有序顺序表查询
- Linux 系统调用机制（下）
- 【SSLGZ 2384】2014年初中竞赛试题(南海) 字符串
- [BZOJ2253][2010 Beijing wc]纸箱堆叠（dp+bit+cdq分治）
