html5action上传图片(html点击上传图片)

2023-11-07 00:00:54分类：杂七乱八热度：41评论： 1

　　说明：

<canvas>元素用于在网页上绘制图形。这是一个图形容器，您可以控制其每一像素，必须使用脚本来绘制图形。

IE 8 以及更早的版本不支持 <canvas>元素。

　　贴士：全部例子都分享在我的 GayHub：https://github.com/bxm0927/canvas-special

　　尤雨溪个人主页炫彩三角纽带效果，点击还可变换

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/evan-you/index.html

　　

　　知乎登录注册页动态离子背景效果

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/zhihu/index.html

　　

　　基于 canvas 的五子棋完整功能实现

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/five-chess/index.html

　　

　　基于 canvas 的《是男人就下100层》小游戏完美实现

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/man-down100/index.html

　　

　　毛笔字书写田字格，可以写字

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/brush/index.html

　　

　　随心而动，随刃而行。输入文字显示动画粒子特效

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/side-text/index.html

　　

　　鼠标移动炫彩小球

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/globule/index.html

　　

　　2048

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/game2048/index.html

　　

　　贪吃蛇

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/snake/index.html

　　

　　看你有多色

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/look-def-color/index.html

　　

　　坦克大战

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/tank/index.html

　　

　　宇宙行星旋转特效

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/universe/index.html

　　

　　支付宝咻咻咻动画特效

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/alipay/index.html

　　

　　程序员表白代码

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/love-time/index.html

　　

　　心形文字

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/heart/index.html

　　

　　照片墙

　　GitHub源码：https://github.com/bxm0927/canvas-special

　　Demo演示：https://bxm0927.github.io/canvas-special/photo-wall/index.html

　　

　　canvas 简介

　　<canvas>元素用于在网页上绘制图形。这是一个图形容器，您可以控制其每一像素，必须使用脚本来绘制图形。

　　<canvas>标记和 SVG 以及 VML 之间的一个重要的不同是， <canvas>有一个基于 Java的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

　　注意：IE 8 以及更早的版本不支持 <canvas>元素。

　　

　　canvas 初体验

<canvasid="myCanvas"width="450"height="450">

Your browser does not support the Canvas API, Please upgrade your browser.

</canvas>

<>

let myCanvas =document.getElementById('myCanvas');

let ctx =myCanvas.getContext('2d');

ctx.moveTo(100,100);

ctx.lineTo(200,200);

ctx.lineTo(200,300);

ctx.stroke();

</>

canvas 核心 API 讲解

　　建议大家看官方文档来系统的学习 canvas API，本文下面的例子只是对知识点的巩固。

MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

菜鸟教程：https://www.runoob.com/tags/ref-canvas.html

w3school：https://www.w3school.com.cn/tags/htmlrefcanvas.asp

颜色、样式和阴影

　　fillStyle、strokeStyle

　　fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

　　strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

// 用蓝色填充矩形

ctx.fillStyle="#0000ff";

ctx.fillRect(20,20,150,100);

// 渐变填充

varmy_gradient=ctx.createLinearGradient(0,0,0,170);

my_gradient.addColorStop(0,"black");

my_gradient.addColorStop(1,"white");

ctx.fillStyle=my_gradient;

ctx.fillRect(20,20,150,100);

// 图像填充

varimg=document.getElementById("lamp");

varpat=ctx.createPattern(img,"repeat");

ctx.rect(0,0,150,100);

ctx.fillStyle=pat;

ctx.fill();

　　

　　

　　shadowBlur、shadowColor

　　shadowBlur 设置或返回用于阴影的模糊级别

　　shadowColor 设置或返回用于阴影的颜色

　　注释：

请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。

请通过使用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果。

ctx.shadowBlur=20;

ctx.shadowColor="black";

ctx.fillStyle="blue";

ctx.fillRect(20,20,100,80);

　　

　　createLinearGradient()、createRadialGradient()

　　context.createLinearGradient(x0,y0,x1,y1)创建线性渐变

　　context.createRadialGradient(x0,y0,r0,x1,y1,r1)创建放射状/环形的渐变

　　注释：addColorStop(stop,color)方法与 createLinearGradient()或 createRadialGradient()一起使用。

varmy_gradient=ctx.createLinearGradient(0,0,0,170);

my_gradient.addColorStop(0,"black");

my_gradient.addColorStop(0.5,"red");

my_gradient.addColorStop(1,"white");

ctx.fillStyle=my_gradient;

ctx.fillRect(20,20,150,100);

　　

vargrd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,100);

　　

　　context.createPattern()

　　context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")重复绘制元素，元素可以是图片、视频，或者其他 <canvas>元素。

varimg=document.getElementById("lamp");

varpat=ctx.createPattern(img,"repeat");

ctx.rect(0,0,150,100);

ctx.fillStyle=pat;

ctx.fill();

　　

　　线条样式

　　lineCap

context.lineCap="butt|round|square"

　　设置或返回线条的结束端点样式 （平直的边缘(默认)、圆形线帽、正方形线帽）

　　lineJoin

context.lineJoin="miter|bevel|round"

　　设置或返回两条线相交时，所创建的拐角类型 （尖角(默认)、斜角、圆角）

ctx.beginPath();

ctx.lineJoin="round";

ctx.moveTo(20,20);

ctx.lineTo(100,50);

ctx.lineTo(20,100);

ctx.stroke();

　　

　　lineWidth

ctx.lineWidth =10

　　设置或返回当前的线条宽度，单位 px

　　矩形

　　rect()、fillRect()、strokeRect()

　　context.rect(x,y,width,height)创建矩形

　　context.fillRect(x,y,width,height)创建已填色的矩形，默认的填充颜色是黑色。

　　context.strokeRect(x,y,width,height)创建不填色的矩形，默认的笔触颜色是黑色。

// 红色矩形

ctx.beginPath();

ctx.lineWidth="6";

ctx.strokeStyle="red";

ctx.rect(5,5,290,140);

ctx.stroke();

　　clearRect()

　　clearRect() 在给定的矩形内清除指定的像素

// 在给定矩形内清空一个矩形

ctx.fillStyle="red";

ctx.fillRect(0,0,300,150);

ctx.clearRect(20,20,100,50);

　　

　　路径

　　提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

　　fill()

　　填充当前的图像（路径）。默认颜色是黑色。

　　提示：请使用 fillStyle属性来填充另一种颜色/渐变。

　　注释：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

// 绘制 150*100 像素的矩形，然后用绿色来给它填色：

ctx.rect(20,20,150,100);

ctx.fillStyle="green";

ctx.fill();

　　

　　stroke()

　　stroke() 方法会绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

　　提示：请使用 strokeStyle属性来绘制另一种颜色/渐变。

　　beginPath()

　　beginPath() 起始一条路径，或重置当前路径。

　　closePath()

　　closePath() 创建从当前点回到起始点的路径.

　　moveTo()、lineTo()

　　moveTo() 把路径移动到画布中的指定点，不创建线条。

　　lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条。

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(300,150);

ctx.stroke();

　　quadraticCurveTo()、bezierCurveTo()

　　context.quadraticCurveTo(cpx,cpy,x,y);创建二次贝塞尔曲线

　　context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);创建三次方贝塞尔曲线

ctx.beginPath();

ctx.moveTo(20,20);

ctx.quadraticCurveTo(20,100,200,20);

ctx.stroke();

　　

ctx.beginPath();

ctx.moveTo(20,20);

ctx.bezierCurveTo(20,100,200,100,200,20);

ctx.stroke();

　　

　　arc()、arcTo()

　　context.arc(x,y,r,sAngle,eAngle[,counterclockwise]);创建弧/曲线（用于创建圆形或部分圆）

　　context.arcTo(x1,y1,x2,y2,r);创建两切线之间的弧/曲线

ctx.beginPath();

arc(100,75,50,0*Math.PI,1.5*Math.PI)

ctx.stroke();

　　

ctx.beginPath();

ctx.moveTo(20,20);// 创建开始点

ctx.lineTo(100,20);// 创建水平线

ctx.arcTo(150,20,150,70,50);// 创建弧

ctx.lineTo(150,120);// 创建垂直线

ctx.stroke();// 进行绘制

　　

　　clip()

　　clip() 从原始画布剪切任意形状和尺寸的区域。

html5action上传图片(html点击上传图片),html5action上传图片(html点击上传图片),html5action上传图片,视频,源码,html,第1张

// 剪切矩形区域

ctx.rect(50,20,200,120);

ctx.stroke();

ctx.clip();

// 在 clip() 之后绘制绿色矩形

ctx.fillStyle="green";

ctx.fillRect(0,0,150,100);

　　

　　isPointInPath()

　　isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false。

ctx.rect(20,20,150,100);

if(ctx.isPointInPath(20,50)){

ctx.stroke()

}

转换

　　scale()

　　scale() 缩放当前绘图至更大或更小。

// 绘制矩形，放大到 200%，然后再次绘制矩形：

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

　　rotate()

　　rotate() 旋转当前绘图。

// 将矩形旋转 20 度：

ctx.rotate(20*Math.PI /180);

ctx.fillRect(50,20,100,50);

　　

　　translate()

　　translate() 重新定义画布上的 (0,0) 位置。

ctx.fillRect(10,10,100,50);

ctx.translate(70,70);

ctx.fillRect(10,10,100,50);

　　

　　transform()、setTransform()

　　context.transform(a,b,c,d,e,f);替换绘图的当前转换矩阵。

　　context.setTransform(a,b,c,d,e,f);将当前转换重置为单位矩阵。然后运行 transform()。

　　文本

　　font、textAlign、textBaseline

　　font 设置或返回文本内容的当前字体属性。

　　textAlign 设置或返回文本内容的当前对齐方式。

　　textBaseline 设置或返回在绘制文本时使用的当前文本基线。

　　fillText()、strokeText()、measureText()

　　context.fillText(text,x,y,maxWidth);在画布上绘制被填充的文本。

　　context.strokeText(text,x,y,maxWidth);在画布上绘制文本（无填充）。

　　context.measureText(text).width;返回包含指定文本宽度的对象。

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

ctx.font="40px Arial";

// 创建渐变

vargradient=ctx.createLinearGradient(0,0,myCanvas.width,0);

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// 用渐变填色

ctx.strokeStyle=gradient;

ctx.strokeText("Hello World",10,90);

图像绘制

　　drawImage()

　　context.drawImage(img,x,y,width,height);向画布上绘制图像、画布或视频。

varimg=document.getElementById("tulip");

ctx.drawImage(img,10,10);

像素操作

　　width、height、data

　　width 返回 ImageData 对象的宽度。

　　height 返回 ImageData 对象的高度。

　　data 返回一个对象，其包含指定的 ImageData 对象的图像数据。

　　createImageData()、getImageData()、putImageData()

　　createImageData() 创建新的、空白的 ImageData 对象。

　　getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。

　　putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上。

　　合成

　　context.globalAlpha=number;设置或返回绘图的当前 alpha 或透明值。 context.globalCompositeOperation="source-in";设置或返回新图像如何绘制到已有的图像上。

　　其他

　　save()、restore()

　　save() 保存当前环境的状态。

　　restore() 返回之前保存过的路径状态和属性。

　　getContext

letcxt =Canvas.getContext('2d')

　　为不同的绘制类型 （2d、3d）提供不同的环境，当前唯一支持的是 2d环境。

相关阅读：

1、抖音直播矩阵是什么意思（抖音直播矩阵玩法）

2、源码文件怎么打开（如何打开文件代码）

3、怎么查看网页的url地址（如何查看网页的url）

4、学生个人网页制作html代码css（学生个人网页制作html代码css宽高）

5、layui前端页面模板（layui前端页面模板加分页增删查改）

1、本网站名称：源码村资源网
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » html5action上传图片(html点击上传图片)
源码村长

源码村长

分享到：

相关推荐

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论