前言:
现在你们对“html5矩形渐变”大致比较着重,咱们都需要了解一些“html5矩形渐变”的相关资讯。那么小编在网络上汇集了一些对于“html5矩形渐变””的相关知识,希望你们能喜欢,我们一起来了解一下吧!在前端工作中,canvas是比较重要的一部分,但是很多人入门的人都对其一知半解。阅读本篇文章,带你入门canvas。
定义
<canvas> 标签定义图形,比如图表和其他图像,但必须使用脚本来绘制图形。在画布上(Canvas)可以画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。
首先创建一个简单的画布
html部分
<canvas id="canvas" width="200" height="200"></canvas>
style部分
* { margin: 0px; padding: 0px;}#canvas { border: 1px solid pink;}
js部分
let canvas = document.getElementId('canvas');// 创建context对象// getContext('2d')对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法let ctx = canvas.getContext('2d');// 绘制一个坐标为(10, 20)宽为100,高为100的红色矩形// fillRect(x, y, width, height)ctx.fillStyle = '#f00';ctx.fillRect(10, 20, 100, 100);
这样一个简单的画布就绘制好了。
在日常中,仅仅这样是不够的,下面介绍一些常用的方法:
画线
修改js部分
let canvas = document.getElementId('canvas');let ctx = canvas.getContext('2d');// 从坐标(0, 0)到坐标(200, 200)的直线,使用stroke()方法来绘制ctx.moveTo(0, 0);ctx.lineTo(200, 200);ctx.stroke();绘制圆形,使用arc(x, y, r, start, stop)
修改js部分
let canvas = document.getElementId('canvas');let ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(80, 80, 30, 0, 2*Math.PI);ctx.stroke();文本
使用canvas文本功能,可以绘制一些好看的字体,比如空心文字,文字渐变等等
修改js部分
let canvas = document.getElementId('canvas');let ctx = canvas.getContext('2d');// font 定义字体大小,字体ctx.font = '30px Arial';// fillText(text, x, y) 定义实心的文本// strokeText(text, x, y) 定义空心的文本ctx.fillText('Hello, world!!!', 10, 10);ctx.strokeText('Hello, world!!!', 10, 10);渐变
修改js部分
let canvas = document.getElementId('canvas');let ctx = canvas.getContext('2d');// createLinearGradient(x,y,x1,y1) 创建线条渐变// createRadialGradient(x,y,r,x1,y1,r1) 创建一个径向/圆渐变let grd = ctx.createLinearGradient(0,0,200,0);let grd = ctx.createLinearGradient(75,50,5,90,60,100);grd.addColorStop(0, 'red');grd.addColorStop(1, 'white');ctx.fillStyle = grd;ctx.fillRect(10, 20, 150, 75);加载图像,使用drawImage(img, x, y)加载图片
修改html部分
<img src="./sheep.jpg" id="sheep"/><canvas id="canvas" width="200" height="200"></canvas>
修改js部分
let canvas = document.getElementId('canvas');let ctx = canvas.getContext('2d');let img = document.getElementId('sheep');img.onload = function() { ctx.drawImage(img, 10 , 10);}
看到这里,应该对canvas有了一个基本的认识。
学好canvas,需要翻阅很多资料,不断实践。
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #html5矩形渐变 #html 5 canvas