1月13号学习html5绘制图形(第71天的学习 ...
<!--创建函数参数id 定义变量 canvas获得id 判断 canvas是空 返回否 定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
<!--fillStyle属性填充样式 在属性中填入填充的颜色值 fillRect方法填充一个矩形-->
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
<!--绘制一个矩形，带有向右偏移 10 像素的阴影 带有向下偏移 10 像素的阴影-->
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
<!--shadowColor属性设置或返回用于阴影的颜色 .shadowBlur模糊级数是 7.5 translate设定坐标 距左 和距高-->
context.shadowColor = 'rgba(100, 100, 100, 0.5)';
context.shadowBlur = 7.5;
context.translate(0, 50);
<!--循环i context调用设定距左 和距高 将context放进 create5Star创建一个五角星的路径 执行填充-->
for(var i=0; i<3; i++)
{
context.translate(50, 50);
create5Star(context);
context.fill();
}
}
<!--创建函数-->
function create5Star(context)
{
<!--定义变量 n=0 dx=100 dy=0 s=50 beginPath通过调用这个方法可以开始路径创建 fillStyle设定绘制样式进行图形绘制 x y dig 创建圆形矩形 xy通过算法创建五角星-->
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();
}
<!--创建函数参数id 定义变量 canvas获得id 判断 canvas是空 返回否 定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
<!--fillStyle属性填充样式 在属性中填入填充的颜色值 fillRect方法填充一个矩形-->
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
<!--新建一个image 用来src引入1111.jpg图片-->
image = new Image();
image.src = "1111.jpg";
<!--绘制图像函数 将context,image 放进drawImg-->
image.onload = function()
{
drawImg(context,image);
};
}
<!--创建函数 值context,image-->
function drawImg(context,image)
{
<!--循环i-->
for(var i=0; i<7; i++)
<!--设置图片的尺寸-->
context.drawImage(image,0+i*50,0+i*25,100,100);
}
<!--创建函数参数id 定义变量 canvas获得id 判断 canvas是空 返回否 定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
<!--fillStyle属性填充样式 在属性中填入填充的颜色值 fillRect方法填充一个矩形-->
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
<!--新建一个image 用来src引入1111.jpg图片-->
image = new Image();
image.src = "1111.jpg";
<!--绘制图像函数 将context,image 放进drawImg-->
image.onload = function()
{
drawImg(context,image);
};
}
<!--创建函数 值context,image-->
function drawImg(context,image)
{
<!--定义变量i 调用方法绘制图片的原始图像 绘制将局部区域进行放大后的图像 -->
var i=0;
context.drawImage(image,0,0,100,100);
context.drawImage(image,23,5,57,80,110,0,100,100);
}
<!--创建函数参数id 定义变量 canvas获得id 判断 canvas是空 返回否 定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
function draw(id)
{
var image = new Image();
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
<!--src引入1111.jpg图片-->
image.src = "1111.jpg";
<!--绘制图像函数 将canvas,context,image 放进drawImg-->
image.onload = function()
{
drawImg(canvas,context,image);
};
}
<!--创建函数 值canvas,context,image-->
function drawImg(canvas,context,image)
{
<!--平铺比例 缩小后图像宽度 缩小后图像的高度 平铺横向个数 平铺纵向个数 循环i 循环j 将全部展示出来-->
var scale=5
var n1=image.width/scale;
var n2=image.height/scale;
var n3=canvas.height/n1;
var n4=canvas.width/n2;
for(var i=0; i<n4; i++)
for(var j=0; j<n4; j++)
context.drawImage(image,i*n1,j*n2,n1,n2);
}
<!--创建函数参数id 定义变量 canvas获得id 判断 canvas是空 返回否 定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
<!--font设置文本字体 定义tet内容 tm1获得字体的宽度 fillText绘制文字样式 -->
context.font = 'italic 30px sans-serif';
var txt = '字符串的宽度为';
var tm1 = context.measureText(txt);
context.fillText(txt, 10, 30);
context.fillText(tm1.width,tm1.width+10,30);
<!--改变字体 重新获得文字的宽度 重新绘制文字的样式-->
context.font = "bold 30px sans-serif";
var tm2 = context.measureText(txt);
context.fillText(txt, 10, 70);
context.fillText(tm2.width,tm2.width+10,70);
}
<!--创建函数参数id 定义变量 canvas获得id 判断 canvas是空 返回否 定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
<!--fillStyle属性填充样式 在属性中填入填充的颜色值 -->
context.fillStyle = "#00f";
<!--font设置文本字体 textBaseline属性设置垂直对齐方式 fillText填充文本内容-->
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText('示范文字', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText('示范文字', 0, 50);
}
<!--创建函数参数id 定义变量 canvas获得id 判断 canvas是空 返回否 定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
<!--font设置文本字体 定义tet内容 tm1获得字体的宽度 fillText绘制文字样式 -->
context.font = 'italic 30px sans-serif';
var txt = '字符串的宽度为';
var tm1 = context.measureText(txt);
context.fillText(txt, 10, 30);
context.fillText(tm1.width,tm1.width+10,30);
<!--改变字体 重新获得文字的宽度 重新绘制文字的样式-->
context.font = "bold 30px sans-serif";
var tm2 = context.measureText(txt);
context.fillText(txt, 10, 70);
context.fillText(tm2.width,tm2.width+10,70);
}
