HTML5 canvas基本绘图之填充样式实现


Posted in HTML / CSS onJune 27, 2016

<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。

<canvas></canvas>只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>元素上绘图主要有三步:

1.获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象进行绘图。

填充样式

前面用到的fillStyle和strokeStyle除了设置颜色外,还能设置其他填充样式,这里以fillStyle为例:

 •线性渐变

使用步骤
(1)var grd = context.createLinearGradient( xstart , ystart, xend , yend )创建一个线性渐变,设置起始坐标和终点坐标;
(2)grd.addColorStop( stop , color )为线性渐变添加颜色,stop为0~1的值;
(3)context.fillStyle=grd将赋值给context。

 •径向渐变
该方法与线性渐变使用方法类似,只是第一步接收的参数不一样
var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。

 •位图填充
createPattern( img , repeat-style )使用图片填充,repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。 

JavaScript Code复制内容到剪贴板
  1. var canvas = document.getElementById("canvas");   
  2.     var context = canvas.getContext("2d");   
  3.   
  4.     //线性渐变   
  5.     var grd = context.createLinearGradient( 10 , 10, 100 , 350 );   
  6.     grd.addColorStop(0,"#1EF9F7");   
  7.     grd.addColorStop(0.25,"#FC0F31");   
  8.     grd.addColorStop(0.5,"#ECF811");   
  9.     grd.addColorStop(0.75,"#2F0AF1");   
  10.     grd.addColorStop(1,"#160303");   
  11.     context.fillStyle = grd;   
  12.     context.fillRect(10,10,100,350);   
  13.   
  14.     //径向渐变   
  15.     var grd = context.createRadialGradient(325 , 200, 0 , 325 , 200 , 200 );   
  16.     grd.addColorStop(0,"#1EF9F7");   
  17.     grd.addColorStop(0.25,"#FC0F31");   
  18.     grd.addColorStop(0.5,"#ECF811");   
  19.     grd.addColorStop(0.75,"#2F0AF1");   
  20.     grd.addColorStop(1,"#160303");   
  21.     context.fillStyle = grd;   
  22.     context.fillRect(150,10,350,350);   
  23.   
  24.     //位图填充   
  25.     var bgimg = new Image();   
  26.     bgimg.src = "background.jpg";   
  27.     bgimg.onload=function(){   
  28.         var pattern = context.createPattern(bgimg, "repeat");   
  29.         context.fillStyle = pattern;   
  30.         context.strokeStyle="#F20B0B";   
  31.         context.fillRect(600, 100, 200,200);   
  32.         context.strokeRect(600, 100, 200,200);   
  33.     };   
  34.   

效果如下:

HTML5 canvas基本绘图之填充样式实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 #HTML / CSS
浅析HTML5中header标签的用法
Jun 24 #HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 #HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 #HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 #HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 #HTML / CSS
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
浅析is_writable的php实现
2013/06/18 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python多进程原理与用法分析
2018/08/21 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python读写csv文件的方法
2019/08/13 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python十进制转二进制的详解
2020/02/07 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
法学毕业生自我鉴定
2014/01/31 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
寻找成龙观后感
2015/06/12 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android