canvas画布+form表单部分属性

来源：互联网发布：日本研究生知乎编辑：程序博客网时间：2024/05/18 16:16

本周学习知识点：

一、HTML5 Canvas画布

1. Canvas画布介绍

2. 绘制线段、虚线

3. 绘制矩形

4. 绘制圆形、圆角

5. 绘制图像、平铺

6. 绘制文字

7. 绘制渐变图形

8. 绘制视频

二、HTML5的智能表单

三、图像截取

四、动画效果

一、HTML5 Canvas画布

A、canvas画布介绍

HTML5中的canvas 标签用于绘制图像，不过<canvas>元素本身没有绘制能力（它仅仅是图形的容器）。画布对象的getContext()方法返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

B、绘制线段

绘制线段需要两个条件：

开始点：context.moveTo()

结束点：context.lineTo()

C、绘制矩形

一. 开启新路径beginPath()

结束关闭路径:closePath()

rect()方法绘制

描边stroke（）/填充fill（）

二. fillRect()方法直接绘制填充图形

strokeRect() 绘制描边图形

clearRect() 清除画布

D、绘制圆形

arc() 绘制圆形(x,y,半径,起始弧度,结束弧度,顺时针还是逆时针)

arc方法绘制

lineWidth 设置线宽

strokeStyle 绘制样式

E、绘制文字

strokeStyle 设置描边属性　

strokeText(文字,x,y) 绘制描边文字

fillStyle 设置填充属性

fillText(文字,x,y) 填充文字

font设置字体属性

F、绘制渐变

渐变分为线性渐变和径向渐变（放射渐变）

createLinearGradient(sx,sy,ex,ey)

addColorStop(); 介于0.0-1.0之间的值，表示开始与结束的位置

二、HTML5智能表单

HTML5 新的特性：为了排版美观，不需要每个表单项都嵌套，给form标签指定id属性；其他的表单项（input textarea select）增加form属性，值等于 id值。

A、表单新增的type属性

type="email"限制用户输入必须为Email类型

type="url"限制用户输入必须为URL类型

type="date"限制用户输入必须为日期类型

type="time"限制用户输入必须为时间类型Opera

type="month"限制用户输入必须为月类型Opera

type="week"限制用户输入必须为周类型Opera

type="number"限制用户输入必须为数字类型

type="range"产生一个滑动条的表单

type="search"产生一个搜索意义的表单配合results="n"属性 C

type="color"生成一个颜色选择表单

B、表单新增的属性

属性值

Required required （必填）

placeholder提示文本

Autofocus autofocus (自动的焦点)

Pattern 正则表达式

C、自动填充 autocomplete

datalist标签配合option标签实现的自动填充表单功能：

<option>PHP教程</option>

<option>PHP怎么样?</option>

</datalist>

三、 save与restore的区别：

每次调用 save（）方法就会把当前的状态保存起来，

每次使用 restore（）方法，就会将上次保存的状态恢复(将当前的图层和原来的整合在一起)。

学习总结：

一．自定义函数绘制虚斜线

<body>

</body>

var canvas=document.getElementById('canvas');

var cxt=canvas.getContext('2d');

function slant(sx,sy,ex,ey,len){

var w=ex-sx;

var h=ey-sy;

var length=Math.sqrt(w*w+h*h);

var dashNum=length/len;

for(var i=0;i<dashNum;i++){

if(i%2==0){

cxt.moveTo(sx+i*(w/dashNum),sy+i*(h/dashNum));

}else{

cxt.lineTo(sx+i*(w/dashNum),sy+i*(h/dashNum));

}

cxt.stroke();

}

//slant(0,0,100,30,5);

slant(10,100,100,30,5);

//slant(20,20,150,200,10);

</script>

二、绘制矩形

//绘制能力都是通过js来设置的

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

//绘制矩形

context.rect(0,0,200,100); //配合 stroke()或者 fill()方法

//context.strokeRect(0,0,100,50);

//描边

context.stroke();

//填充

context.fill();

//填充

//context.fillStyle = 'green';//设置填充的样式

//context.fillRect(0,0,100,50);

</script>

0 0