初学canvas

浏览器支持:除ie8及以下其它都支持

canvas属性:height width

本身没有绘图能力,必须使用脚本来完成

getContext()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性,传入"2d"可以取得2D上下文对象,绘制文本、线条、矩形、圆形等等;

1.绘制无填充矩形

1.1strokeStyle 矩形边框颜色

1.2strokeRect 绘制无填充矩形  前两个代表矩形坐标,后两个为矩形宽高

<canvas id="drawing" width="200" height="200"></canvas>
var drawing = document.getElementById(‘drawing‘);//确定是否支持canvas元素
if(drawing.getContext){
    var context = drawing.getContext(‘2d‘);
 }

 //描边
  var context = drawing.getContext(‘2d‘);
  context.strokeStyle = "red";
  context.strokeRect(0,0,200,200);

2.绘制边框渐变矩形

2.1creatLinearGradient()线性渐变 接收4个参数起点的坐标xy,终点的坐标xy

2.2addColorStop()方法来指定色标. 接收2个参数,色标位置(一个0(开始的颜色)到1(结束的颜色之间的数字))和CSS颜色值

参数 描述
stop 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值
var linearGradient = recontext.createLinearGradient(0,0,0,200);
linearGradient.addColorStop(0,‘#aaf‘); linearGradient.addColorStop(0.5,‘#faa‘);
recontext.strokeStyle = linearGradient
recontext.lineWidth = 5; //设置或返回当前的线条宽度
recontext.strokeRect(0,0,150,150);

3.径向渐变

3.1createRadialGradient()径向渐变 接收6个参数,前三个指定起点园的圆心(xy)及半径,后三个指定终点圆的圆心(xy)及半径

3.2fillRact表示在画布上绘制可填充矩形,从左上角开始(0,0)

3.3fillStyle

var radialGradient = context.createRadialGradient(100,100,0,100,100,100);
  radialGradient.addColorStop(0,‘yellow‘);
  radialGradient.addColorStop(0.5,‘#aaf‘);
  radialGradient.addColorStop(1,‘pink‘);
  context.fillStyle = radialGradient;//设置或返回用于填充绘画的颜色、渐变或模式
  context.fillRect(0,0,200,200)

4渐变文字

4.1strokeText()在画布上绘制文本(无填充)

 var linearGradient = text.createLinearGradient(0,0,100,100);
  linearGradient.addColorStop(0,‘yellow‘);
  linearGradient.addColorStop(0.5,‘green‘);
  linearGradient.addColorStop(1,‘pink‘);
  text.strokeStyle = linearGradient;
  text.font = "30px/50px arial";
  text.strokeText("杜小雨",80,60)

5.模式

5.1createPattern() 方法在指定的方向内重复指定的元素。context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

参数 描述
image 规定要使用的图片、画布或视频元素。
repeat 默认。该模式在水平和垂直方向重复。
repeat-x 该模式只在水平方向重复。
repeat-y 该模式只在垂直方向重复。
no-repeat 该模式只显示一次(不重复)。

5.2rect()方法创建矩形。

5.3clearRect()在给定的矩形内清除指定的像素  4个参数,x,y坐标,以及要清除空间的长宽

html

<img src="1.jpg" id="img">
<canvas id="repeat-img" width="200" height="200"></canvas>
<button onclick="draw(‘no-repeat‘)">No-repeat</button>
  <button onclick="draw(‘repeat‘)">repeat</button>

js

draw =function (imgdirection){
    var drawimg = document.getElementById("repeat-img");
    var img = document.getElementById("img");
    if(drawimg.getContext){
        var retext = drawimg.getContext("2d");
        retext.clearRect(0,0,drawimg.width,drawimg.height);
        var pat = retext.createPattern(img,imgdirection);
        retext.rect(0,0,200,200);
        retext.fillStyle = pat;
        retext.fill();
    }
}
时间: 2024-10-03 07:51:06

初学canvas的相关文章

JavaScript - 收藏集 - 掘金

Angular 中的响应式编程 -- 浅淡 Rx 的流式思维 - 掘金第一节:初识Angular-CLI第二节:登录组件的构建第三节:建立一个待办事项应用第四节:进化!模块化你的应用第五节:多用户版本的待办事项应用第六节:使用第三方样式库及模块优化用第七节:给组件带来活力Rx--隐藏在 Angular 中的利剑Redux你的 A... Electron 深度实践总结 - 前端 - 掘金思维导图 前言: Electron 从最初发布到现在已经维护很长一段时间了,但是去年才开始慢慢升温.笔者个人恰好

用实例深入浅出详述canvas

写在前面 闲来无事的时候会来一场一个人说走就走的旅行或者宅家里系统性的看些技术方面的书,最近在看<html5与css3权威指南>,这本书挺适合初学前端的人,虽然对于我来说只是温习相关的知识,但好歹来说开卷有益,只要是一本好书,即使知识很浅也值得一看. (我会在相关代码注释中揭示canvas对象相关方法各参数的含义) 写的不好的地方还望大家见谅 (最近老有人问我怎么学前端,怎样快速的成为高手,我只想说我只是小菜,我愿意对某个具体问题给你相关解答,但对这么广泛的有深度的问题,我给不了答案,只想说j

【玖哥乱弹】Android初学路上会遇到的瓶颈

对于大多数大三学生来说,这个暑假是人生最后一个暑假.对于IT专业的学生来说,开学后就要面对各大IT企业的秋招,很多人会成为从0开始的Android实习生.在Android初学之路上,每个Android实习生都会遇到各式各样的瓶颈. 克服瓶颈要从克服自己对一切瓶颈的偏见做起,把逃避瓶颈的行为变成享受瓶颈带来的乐趣的过程.要知道喜力比国产啤酒贵好多的一条重要原因就在于喜力的瓶颈:你现在去买一瓶玻璃瓶装喜力,用手握住瓶颈,大拇指按住那颗星,然后用你最熟悉的动作撸瓶颈,你会喜欢这种手感的. Androi

canvas保存图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>初学html5</title> <meta name="keywords" content=""> <meta name="description" content="&

canvas绘制图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>初学html5</title> <meta name="keywords" content=""> <meta name="description" content="&

flex入门--初学笔记1

环境:flashBuilder + eclipse 4.2 基本控件: 1 <mx:Script> 2 <![CDATA[ 3 import mx.controls.Alert; 4 public function showMsg(msg:String):void{ 5 mx.controls.Alert.show(msg); 6 } 7 ]]> 8 </mx:Script> 9 <mx:Panel title="常用控件" width=&qu

canvas绘制文字

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>初学html5</title> <meta name="keywords" content=""> <meta name="description" content="&

HTML5 Canvas 学习笔记(canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像)

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp   http://blog.csdn.net/clh604/article/details/8536059   http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

Argument &#39;xxx&#39; is not a function, got undefined,初学Angular的第一个坑

终于考完试了,在没更新的这一段时间里,一直都在忙于应付考试.不过在期间也是接触到不少好玩的东西,比如Html5的Canvas,我用lufylegend的Html5引擎做了个<看你有所色>的游戏.还有最近刚开始玩的Angular. Angular也是早有听说了啊,一直没闲下功夫研究,趁着放假,学一学.慕课网(www.imooc.com)里有一套教程,还是很不错的.但是真正上手编码的时候就发现,尼玛!例子都跑不起来,全是报错,Argument 'xxx' is not a function, go