绘制渐变

渐变是一种很普遍的视觉形象，能带来视觉上的舒适感。在Canvas中，绘图API提供了两个原生的渐变方法，包括线性渐变和径向渐变。渐变，在颜色集上使用逐步抽样的算法，可以应用的描边样式和填充样式中。使用渐变需要三个步骤：首先是创建渐变对象；其次是设置渐变颜色和过渡方式；最后将渐变对象赋值给填充样式或描边样式。

代码实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>绘制渐变</title><script type="text/javascript">function Draw(){var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");//创建渐变对象：线性渐变var grd=context.createLinearGradient(0,0,300,0);//设置渐变颜色及方式grd.addColorStop(0,"#f90");grd.addColorStop(1,"#0f0");//将填充样式设置为线性渐变对象context.fillStyle=grd;context.fillRect(0,0,300,80);}window.addEventListener("load",Draw,false);function Draw2(){var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");//创建渐变对象：径向渐变var grd=context.createLinearGradient(0,0,300,0);//设置渐变颜色及方式grd.addColorStop(0,"#0f0");grd.addColorStop(1,"#f90");//将填充样式设置为线性渐变对象context.fillStyle=grd;context.beginPath();context.arc(180,180,90,0,Math.PI*2,true);context.fill();}window.addEventListener("load",Draw2,false);</script></head><body><canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas><canvas id="canvas2" width="400" height="300">你的浏览器不支持canvas</canvas></body>
</html>

效果上(线性渐变)，下(径向渐变)

模式

模式是一个抽象的概念，描述的是一种规律。在Canvas中，通常会为贴图图像创建一个模式，用于描边样式和填充样式，可以绘制出带图案的边框和背景图。

代码实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>模式</title><script type="text/javascript">function Draw(){var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");var img=new Image();img.src="../img/5.jpg";img.οnlοad=function(){//创建一个贴图模式，循环平铺图像var ptrn=context.createPattern(img,'repeat'); context.fillStyle=ptrn;context.fillRect(0,0,1000,2000);}}window.addEventListener("load",Draw,false);</script></head><body><canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas></body>
</html>

效果

变换

在绘制图像的过程中，如果一种形状的图形要绘制多次，显然是增加了复杂性。Canvas绘图API提供了多种变换方法，为实现复杂的绘图操作提供了便捷的方法。常见的变换方法包括平移、缩放、旋转和变形。

1. 移动变换

将整个坐标系统设置一定的偏移数量，绘制出来的图像也会跟着偏移。(默认以左上角(0,0)作为原点)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>绘制渐变</title><script type="text/javascript">function Draw(){var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");//设置移动偏移量context.translate(200,120);//绘制一个圆形脸谱ArcFace(context);}function ArcFace(context){//绘制一个圆形边框context.beginPath();context.arc(0,0,90,0,Math.PI*2,true);context.lineWidth=5;context.strokeStyle="#f90";context.stroke();//绘制一个脸谱context.beginPath();context.moveTo(-30,-30);context.lineTo(-30,-20);context.moveTo(30,-30);context.lineTo(30,-20);context.moveTo(-20,30);context.bezierCurveTo(-20,44,20,30,30,20);context.strokeStyle="#000";context.lineWidth=10;context.lineCap="round";context.stroke();}window.addEventListener("load",Draw,false);</script></head><body><canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas></body>
</html>

效果

2.缩放变换

缩放变换是将整个坐标系统设置一对缩放因子，绘制出来的图像会相应的缩放。

代码实现

function Draw(){var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");//设置移动偏移量context.translate(200,120);//缩放图像，在水平方向和垂直方向设置不同的缩放因子context.scale(0.6,0.4)//绘制一个圆形脸谱ArcFace(context);}

效果

3.旋转变换

是将整个坐标系统设置一个选装的角度，绘制出来的图像会相应的旋转。

function Draw(){var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");//设置移动偏移量context.translate(200,120);//旋转图像，顺时针旋转30度context.rotate(Math.PI/6);//缩放图像，在水平方向和垂直方向设置不同的缩放因子context.scale(0.6,0.4)//绘制一个圆形脸谱ArcFace(context);}

效果

HTML5利用Canvas绘制图形(绘制渐变、模式、变换)相关推荐

HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果简要教程这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
html5 自动扣图,html5利用canvas实现颜色容差抠图功能
利用canvas的getImageData,我们可以获取到一张图片每一个像素的信息,而通过对每一个像素信息的对比,我们就可以找到需要消去的像素点.比如下面这一张图片,如果我们想要扣去白色部分(粉色是b ...
HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...
如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部-电脑自学网
html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 效果如下: 代码如下: 您的 ...
网页游戏开发基础——Canvas基本图形绘制
什么是Canvas?Canvas是HTML5新增的一个标签,你可以把它翻译为画布,通过它可以绘制二维或三维图形,有了它就可以不用安装flash而实现复杂的动画功能.如何通过Canvas绘图?下面我们来 ...
HTML5 利用canvas API 展示阴影效果
HTML5的Canvas自带API可以显示阴影效果,主要还是在画布(canvas)的上下文对象(context)上做文章 <!DOCTYPE html> <head> < ...
HTML5 装饰Canvas中图形
装饰图形 Canvas为图形提供了一些默认样式,如线条.填充的默认颜色为黑色等.但是,这些默认样式无法满足所有用户的需求,也无法体现Canvas的灵活性,故Canvas为图形定义了一些属性,以便用户自 ...
php图片素描化,html5利用canvas实现图片转素描效果
本章给大家介绍html5如何利用canvas实现图片转素描效果.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 素描滤镜原理: 最基础的算法就是: 1.去色:(去色公式:gray = ...

HTML5利用Canvas绘制图形(绘制渐变、模式、变换)

绘制渐变

模式

变换

1. 移动变换

2.缩放变换

3.旋转变换

HTML5利用Canvas绘制图形(绘制渐变、模式、变换)相关推荐

最新文章

热门文章