普京网址 7

最新标准,0普京网址) // 矩形左上角坐标 (0

其他 API


属性:

  • lineWidth:stroke 的线条宽度 ctx.lineWidth = 2

方法:

  • clearRect: 肃清某某些(矩形区域)画布
    ctx.clearRect(0, 0, 100, 100)
  • measureText:
    总括文本对象的宽度
  • translate
  • rotate

var a=document.getElementById(“myCanvas”);

HTML5新添基本工具——canvas

绘制早先的备选专门的工作:

 

1.在body中参加canvas标签,设置它的id、width、height,当然也得以动态设置它的宽高。

 

 <canvas id=”mycanvas” width=”1200″ height=”500″></canvas>

2.到手canvas对象的前后文obj.getContext(par卡塔尔,par参数为“2d”,如今canvas只补助二维效果。

 

var ctx = document.getElementById(“mycanvas”).getContext(“2d”);

那样你便有了一张1200*500的“画布”和意气风发支名叫“ctx”的画笔,接下去大家从一些最简易的图形开头绘制。

 

 

 

 

 

示范代码如下:

 

复制代码

var ctx=document.getElementById(“container”).getContext(“2d”);

    

    ctx.fillStyle=”blue”;

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

 

    ctx.lineWidth=10;

    ctx.strokeStyle=”red”;

    ctx.strokeRect(300,10,200,100);

复制代码

里头fill表示填充,stroke代表仅绘制边框。

 

同理fillRect表示老实矩形,strokeRect表示矩形边框,他们都有多少个参数:x,y,w,h
分别为横纵坐标、宽、高。

 

fillStyle表示填充样式,strokeStyle表示边框样式。

 

lineWidth表示线宽。

 

 

 

 

急需专一的是,设置样式等应写在绘制图形之前,不然样式会渲染不上。

 

在绘制七个图形时,应该在绘制叁个图纸以前开绘制路线,定制实现后关闭绘制路线并绘制订制好的图纸。举个例子上例标准写法应该为:

 

复制代码

   var ctx=document.getElementById(“container”).getContext(“2d”);

    ctx.beginPath();

    ctx.fillStyle=”blue”;

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

    ctx.closePath();

    ctx.stroke();

 

    ctx.beginPath();

    ctx.lineWidth=10;

    ctx.strokeStyle=”red”;

    ctx.strokeRect(300,10,200,100);

    ctx.closePath();

    ctx.stroke();

复制代码

beginPath(State of Qatar开启绘制路线,close帕特h(卡塔尔(قطر‎闭合绘制路线,stroke(卡塔尔国绘制定制图形。在其后的演习中势必要养成习贯,不然当绘制线条时就能发掘由于未密封绘制路线所现身的线条错连。

 

 

 

绘制线条:

 

亲自过问代码如下:

 

复制代码

var ctx=document.getElementById(“container”).getContext(“2d”);

    ctx.beginPath();

    ctx.moveTo(400,100);

    ctx.lineTo(300,200);

    ctx.lineTo(350,200);

    ctx.lineTo(250,300);

    ctx.lineTo(400,300);

    ctx.closePath();

    ctx.stroke();

复制代码

中间,moveTo表示将画笔移动到有个别坐标上,lineTo指以画笔落点开首画到哪个地点。此次大家想要画叁个简短的枝头
  

 

 

看得出,这里大家只画了大要上。(400,100State of Qatar地点为树顶,(400,300State of Qatar地点为树底中部,线条自动关闭就是大家关闭绘制路线所产生的效率。

 

接下去大家把另二分之一画完,并给那棵树填充上土褐:

 

复制代码

 var ctx=document.getElementById(“container”).getContext(“2d”);

    ctx.beginPath();

    ctx.fillStyle=”green”;

    ctx.moveTo(400,100);

    ctx.lineTo(300,200);

    ctx.lineTo(350,200);

    ctx.lineTo(250,300);

    ctx.lineTo(400,300);

    ctx.lineTo(550,300);

    ctx.lineTo(450,200);

    ctx.lineTo(500,200);

    ctx.lineTo(400,100);

    ctx.fill();

    ctx.closePath();

    ctx.stroke();

复制代码

瞩目写在最终的fill(卡塔尔为填充样式:

 

 

 

 

 

绘制圆形:

 

示范代码:

 

 var ctx=document.getElementById(“container”).getContext(“2d”);

    ctx.beginPath();

    ctx.arc(200,200,100,0,360*Math.PI/180,true);

    ctx.closePath();

    ctx.stroke();

arc(x,y,r,starta,enda,anti卡塔尔;参数分别表示:圆心横、纵坐标,半径、伊始角(需调换来弧度值)、终止角、绘制方向。

 

 

 

用canvas绘制圆,假使您是刚接触一定感到很纠缠,因为它的参数有不菲都以倒转的。这里为了大家不纠缠,笔者多罗嗦几句。

 

起、止角的计量与大家数学上的角度总计分歧,数学中的角度逆时针为正,而那边的起止角是以顺时针为正,也正是当你起角设为0度,止角设为120度。它是从左侧水平地方向下旋转计算角度。

 

再有便是绘制方向上,true代表逆时针,false代表顺时针。晕了的同室看上边包车型地铁例子:

 

 ctx.arc(200,200,100,0,120*Math.PI/180,true);

设起角为0,止角120。按数学上的理念应该是二个低于半圆的上半边的弧,而结果:

 

 

 

那边true表示逆时针绘制,所以绘出了的图纸大于半圆。若改为false:

 

 

 

 

 

此刻顺时针绘制出的图纸小于半圆,这里大家应该也得以明白arc的角度计算方向是与数学相反的。要想画贰个坐落于上方的小半圆?止角设为-120度,绘制方向true就能够。

 

 

 

这里罗嗦这么多正是期望刚接触的意中大家少走弯路,不像大家钻探半天。

 

 

 

制图阴影:

 

复制代码

 var ctx=document.getElementById(“container”).getContext(“2d”);

    ctx.beginPath();

    ctx.fillStyle=”gray”;

    ctx.shadowOffsetX=5;

    ctx.shadowOffsetY=5;

    ctx.shadowColor=”gold”;

    ctx.shadowBlur=5;

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

    ctx.closePath();

    ctx.stroke();

复制代码

shadowOffsetX、shadowOffsetY表示阴影横、纵向偏移量,shadowColor表示阴影颜色,shadowBlur表示模糊等第。

 

是因为在前边CSS3相关博文中已经讲了繁多关于阴影的事物了,这里就单笔带过。依旧亟待在乎的是,先安装样式,最终再绘制矩形,顺序反了意义会渲染不上。

 

 

 

 

 

绘图渐变:

 

线性渐变:

 

复制代码

   ctx.beginPath();

   var Color=ctx.createLinearGradient(500,500,500,0);

   Color.addColorStop(0.3,”orange”);

   Color.addColorStop(0.5,”yellow”);

   Color.addColorStop(1,”gray”);

   ctx.fillStyle=Color;

   ctx.fillRect(0,0,1200,500);

   ctx.closePath();

   ctx.stroke();

复制代码

写法为:将ctx.createLinearGradient(卡塔尔国赋值给风流倜傥颜色变量,颜色变量能够增多七个渐变颜色,addColorStop其共有多个参数,1.偏移量(0-1)2.颜色。末了将颜色变量赋给fillStyle。

 

createLinearGradient(卡塔尔共有三个参数:1、2意味着最初面,3、4意味终于面。

 

 

 

向阳渐变:

 

复制代码

   ctx.beginPath();

        ctx.arc(500,300,100,0,360*Math.PI/180,true);

        var Color=ctx.createRadialGradient(500,300,30,500,300,100);

        Color.addColorStop(0,”red”);

        Color.addColorStop(0.5,”orange”);

        Color.addColorStop(1,”yellow”);

        ctx.fillStyle=Color;

        ctx.fill();

        ctx.closePath();

        ctx.stroke();

复制代码

与线性渐变比较平常,不一致的是其名称叫createRadialGradient(卡塔尔(قطر‎中有三个参数:1、2.渐变早先圆的圆心坐标,3.渐变初步圆的半径,4、5.渐变利落圆的圆心坐标,6.渐变利落圆的半径。

 

 

 

 

 

绘图像和文字字:

 

复制代码

ctx.beginPath();

ctx.strokeStyle=”gold”;

ctx.fillStyle=”bule”;

ctx.font=”50px 微软雅黑”;

ctx.strokeText(“hello world!”,700,200);

ctx.font=”30px 幼圆”;

ctx.fillText(“hello kitty?”,700,300);

ctx.fill();

ctx.closePath();

ctx.stroke();

复制代码

fillText(text,x,y,[maxwidth]State of Qatar绘制字符串,text表示文字内容,x,y文字坐标地点。[maxwidth]可选,设置字符最大宽大防止溢出。font设置字体。

 

其他参数:

text阿里gn 设置文字水平对齐情势 value 为 start|end|left|right|center
 私下认可值为start

textBaseline 设置文字垂直对齐方式 value 为
top|hanging|middle|阿尔法betic|ideographic|bootom  默感到阿尔法betic

我们有意思味本身搜求吧。

 

图形绘制:

呼…..写了半天终于写到正题了,相对于地点轻松图形的绘图,图片绘制要用的越多一些,特别是在玩乐中。

此处介绍生龙活虎种较轻松的章程,首先在body中写上:

   <div class=”hide”>

        <img src=”” id=”myImg”>

   </div>

将您想要绘制的图纸先参与body中,然后将父级div隐讳,一个回避的div中得以放入三个连串中颇有需求绘制的图片以致是音频文件,就临近二个外人看不见的素材库。

 

然后:

 

 var ctx = document.getElementById(“mycanvas”).getContext(“2d”);

    var img=document.getElementById(“myImg”);

    ctx.beginPath();

    ctx.drawImage(img,x,y);

    ctx.closePath();

    ctx.stroke();

收获你想要绘制的图纸对象,通过drawImage来绘制。这里drawImage(卡塔尔(قطر‎能够有3个参数,5个参数,9个参数。

 

3个参数:1.内需绘制的图样对象 2,3.图纸坐标;

 

5个参数:1.亟需绘制的图样对象 2,3.图形坐标 4,5.图片宽高;

 

9个参数:1.亟需绘制的图片对象 2,3.绘制图片的横纵向切割点 4.横向切割宽度
5.纵向切割中度 6,7.切割好的图形坐标 8,9.切割好的图样宽高。

绘制从前的希图干活:
1.在body中步入canvas标签,设置它的id、width、height,当然也足以动态设置它的宽高。
can…

 z-index代表叠合顺序。

* 语法:ctx.moveTo(x, y);

Read More


  • Canvas API
    (w3cschool)
  • HTML5 Canvas — the Basics
    (Opera)
  • Canvas API
    (ruanyifeng)
  • Canvas tutorial
    (MDN)

    1 赞 3 收藏
    评论

普京网址 1

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

ctx.moveTo(0,0);

2.3.8 飞快创设描边矩形和填充矩形

宗旨骨骼


 

<canvas id=”canvas” width=1000 height=1000 style=”border: 1px black
dotted”></canvas> <script> var ctx =
document.getElementById(‘canvas’).getContext(‘2d’); </script>

1
2
3
4
5
<canvas id="canvas" width=1000 height=1000 style="border: 1px black dotted"></canvas>
 
<script>
  var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
</script>

var ctx=c.getContext(“2d”);

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

时下浏览器不扶助canvas,请晋级浏览器版本

矩形


实心:

// 填充色 (默认为钴蓝卡塔尔国 ctx.fillStyle = ‘darkSlateBlue’; //
规定画布左上角坐标为 (0, 0卡塔尔 // 矩形左上角坐标 (0, 0State of Qatar // 矩形大小
100*100 ctx.fillRect(0, 0, 100, 100);

1
2
3
4
5
6
7
// 填充色 (默认为黑色)
ctx.fillStyle = ‘darkSlateBlue’;
 
// 规定画布左上角坐标为 (0, 0)
// 矩形左上角坐标 (0, 0)
// 矩形大小 100*100
ctx.fillRect(0, 0, 100, 100);

空心:

// 边框颜色 (私下认可米白卡塔尔国 ctx.strokeStyle = ‘darkSlateBlue’; //
规定画布左上角坐标为 (0, 0State of Qatar // 矩形左上角坐标 (0, 0卡塔尔 // 矩形大小
100*100 ctx.strokeRect(0, 0, 100, 100);

1
2
3
4
5
6
7
// 边框颜色 (默认黑色)
ctx.strokeStyle = ‘darkSlateBlue’;
 
// 规定画布左上角坐标为 (0, 0)
// 矩形左上角坐标 (0, 0)
// 矩形大小 100*100
ctx.strokeRect(0, 0, 100, 100);

惊人和宽度是用来绘图的逻辑帆布尺寸和是例外的离开style.height和style.widthCSS属性。假诺不安装CSS属性,画布的本征大小将被视作显示大小;
倘若设置CSS属性,并且它们与画布尺寸不一样,则您的内容将要浏览器中缩放。

rotate(angle)旋转坐标轴(angle为顺时针方向,弧度为单位,旋转大旨为坐标原点)

sAngle:绘制伊始的角度。 圆心到最侧边点是0度,顺时针方向弧度增大。

canvas api

2016/01/11 · HTML5 ·
Canvas

初藳出处: 韩子迟   

1.canvas能够使图像产生放大减弱效果呢?

img.src=”flower.png”;

– 参数跟2.3.8均等, 此方法实施到位后。立刻对现阶段矩形进行fill填充。

文字


文字)的岗位设定相对复杂,不像矩形、图像同样有个定位的左上角坐标,也不像圆同样有定点的圆心。文字的地点设置也是叁个看似
(x, y卡塔尔(قطر‎ 情势的坐标,那么些岗位能够是文字的 4 个角,或许核心。

x 部分,蓝线(水平坐标)为 x
坐标所在地点(textAlign
属性):

普京网址 2

ctx.font = “bold 80px serif” ctx.textAlign = “start”; // 暗许值为 start
ctx.fillStyle = ‘darkSlateBlue’; // 文本内容、坐标 ctx.fillText(‘hello
world’, 0, 0卡塔尔(قطر‎;

1
2
3
4
5
6
ctx.font = "bold 80px serif"
ctx.textAlign = "start";  // 默认值为 start
 
ctx.fillStyle = ‘darkSlateBlue’;
// 文本内容、坐标
ctx.fillText(‘hello world’, 0, 0);

y 部分,蓝线(垂直坐标)为 y 坐标所在地点(textBaseline
属性):

普京网址 3

ctx.font = “bold 80px serif” ctx.textAlign = “start”; // 暗中同意值为 start
ctx.textBaseline = “hanging”; // 暗中同意值为 alphabetic ctx.fillStyle =
‘darkSlateBlue’; // 文本内容、坐标 ctx.fillText(‘hello world’, 0, 0卡塔尔(قطر‎;

1
2
3
4
5
6
7
ctx.font = "bold 80px serif"
ctx.textAlign = "start";  // 默认值为 start
ctx.textBaseline = "hanging"; // 默认值为 alphabetic
 
ctx.fillStyle = ‘darkSlateBlue’;
// 文本内容、坐标
ctx.fillText(‘hello world’, 0, 0);

就此文字的任务共有 5*6=30 种。

fillText
方法不协助文件断行,即怀有文件出将来一行内。所以,假使要生成多行文本,独有调用多次fillText 方法。

中空的话用 stroke 即可。

大家好,我是IT修真院塔林分院第6期的学子先小波,生龙活虎枚正直纯洁和善的WEB前端技术员。

线性:

img.alt = “文本新闻”;

圆形


实心:

ctx.fillStyle = ‘darkSlateBlue’; ctx.beginPath(); ctx.arc(100, 100, 50,
0, Math.PI * 2, true); ctx.closePath(); ctx.fill();

1
2
3
4
5
6
ctx.fillStyle = ‘darkSlateBlue’;
 
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

空心:

ctx.strokeStyle = ‘darkSlateBlue’; ctx.beginPath(); ctx.arc(100, 100,
50, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke();

1
2
3
4
5
6
ctx.strokeStyle = ‘darkSlateBlue’;
 
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();

参考二:http://www.runoob.com/html/html5-canvas.htmlHTML5
Canvas | 新手教程

ctx.stroke();

javascript部分:

线段


ctx.strokeStyle = ‘darkSlateBlue’; ctx.beginPath(); ctx.moveTo(100,
100); // 起点 ctx.lineTo(200, 200); ctx.lineTo(300, 100); //
ctx.closePath(); ctx.stroke();

1
2
3
4
5
6
7
8
ctx.strokeStyle = ‘darkSlateBlue’;
 
ctx.beginPath();
ctx.moveTo(100, 100); // 起点
ctx.lineTo(200, 200);
ctx.lineTo(300, 100);
// ctx.closePath();
ctx.stroke();

fillStyle:设置或再次回到用于填充水墨画的水彩、渐变或方式。举个例子说绘制三个渐变色的矩形

strokeStyle=color 设置图形概略颜色

img.onload = function() {

图像


动态生成 img:

var img = new Image(State of Qatar; // 必要求等图片载入后(或许曾在缓存中了卡塔尔(قطر‎手艺用
drawImage 方法 img.onload = function(卡塔尔 { // 左上角坐标 & 图像大小
ctx.drawImage(img, 0, 0, 100, 56State of Qatar; }; img.src = ‘0.jpg’;

1
2
3
4
5
6
7
8
9
var img = new Image();
 
// 一定要等图片载入后(或者已经在缓存中了)才能用 drawImage 方法
img.onload = function() {
  // 左上角坐标 & 图像大小
  ctx.drawImage(img, 0, 0, 100, 56);
};
 
img.src = ‘0.jpg’;

要么直接从 dom 中取:

var img = document.getElementById(‘myImg’); ctx.drawImage(img, 0, 0,
100, 56);

1
2
var img = document.getElementById(‘myImg’);
ctx.drawImage(img, 0, 0, 100, 56);

// 呈现分歧的 textAlign 值

function arrow2(canId, ox, oy, x1, y1, x2, y2,color) {
//参数表明 canvas的 id ,原点坐标 第三个端点的坐标,第一个端点的坐标
var sta = new Array(x1, y1);
var end = new Array(x2, y2);

ctx.moveTo( 300, 300 );

并未有Canvas的年份,绘图只可以依赖Flash插件达成,页面一定要用JavaScript和Flash进行相互作用。有了Canvas,大家就再也无需Flash了,间接行使JavaScript完毕绘制。

ctx.drawImage(img,10,10);

* 参数:x,y 线头点坐标。

ctx.closePath();

​ 第 1 条切线:开端点和操纵点1决定的直线。

//ctx.strokeText( “left”, 450, 400 );

context.lineTo(100,50State of Qatar;  //下一点坐标

ctx.arc(95,50,40,0,2*Math.PI);

2d的支撑的都十一分好,3d(webgl)ie11才支撑,别的都支持

img.onload = function() {

第后生可畏找到canvas成分:

第二种办法:

gradient.addColorStop(“0″,”#FFF”);

普京网址 4

第四步:绘制(点、线、面、图片…) =>ctx.lineTo(x, y)

前些天给我们大饱眼福一下,修真院官方网址JS任务11,深度思忖中的知识点——如何行使canvas?(起初卡塔尔(قطر‎

11、同三个画布如何只改造在那之中一条线的水彩:(先保存线条在涂色,然后restore到上一气象)

canvas.width = 800;     //设置标签的属性宽高

var ctx=c.getContext(“2d”);

beginPath(卡塔尔(قطر‎;新建一条路径

等比公式:  toH = Height * toW   /  Width;

ctx.fillText(“textAlign=center”,150,120);

2、arc(x,y,r,startAngle,endAngle,anticlockwise);

context.drawImage(img,x,y,width,height);

2.3 canvas中的一些常用方法

//
填充渐变

* beginPath: 宗旨的效应是将 差别绘制的模样实行隔绝,

my_gradient.addColorStop(0,”red”);

<canvas  id=”can”  width=”200″ height=”100″></canvas>

height:绘制图片的万丈

ctx.textAlign=”right”;

安装填充图形的颜色:

重复设置canvas标签的宽高属性会让画布擦除具备的从头到尾的经过,

在上个demo中窥见只要设置canvas标签css的width,height与在canvas中安装width,height不相近,那是为何?

普京网址 5

r:半径大小。

4卡塔尔(قطر‎.beginPath(卡塔尔国:起首一条路子,或重新载入参数当前路径

<canvas>标签是h5新添的,通过脚本(平常是js)来绘制图形,canvas只是多少个图形容器,恐怕说是画布。

var img = document.getElementById(“imgId”);

ctx.lineTo(20,100);

ctx.fillStyle=”#FF0000″;    //
fillStyle能够是css颜色,渐变,或图案,私下认可设置是枣红(#000000)

解释:

var my_gradient=demo1.createLinearGradient(0,0,0,170);

createLinearGradient(x,y,x1,y1卡塔尔国创造线条渐变

//得到上下文

gradient.addColorStop(“1.0″,”red”);

grd.addColorStop(0,”red”);

Math.sin(弧度卡塔尔; //夹角对面包车型地铁边 和 斜边的比值

ctx.lineTo(150,170);

7、canvas渐变

单位: px,能够设置width和height属性,不然忽视单位。

ctx.fillText(“textAlign=left”,150,100);

font定义字体

img.src = “imgs/arc.gif”;

ctx.textAlign=”center”;

6.canvas文本

* 注意:**制图线段前必需先安装源点,不然绘制无效。**

var demo2=b.getContext(“2d”);

//画线
ctx.beginPath();
ctx.translate(ox, oyState of Qatar; //坐标起点
ctx.moveTo(sta[0], sta[1]);
ctx.lineTo(end[0], end[1]);
ctx.save();
ctx.strokeStyle=color;//线条颜色
ctx.fillStyle = color;//箭头颜色
ctx.fill();
ctx.stroke();

2.6.4 用JavaScript创建img对象

ctx.fillText(“textAlign=end”,150,80);

//
填充渐变

上下文:是具有的绘图操作api的进口只怕聚众。

canvas里面还是能加上一些文本属性,例如说font,textAlign,textBaseline等等

canvas自甲申有绘图技术,全部的绘图专门的工作必得在js内部变成:

Math.cos(弧度卡塔尔(قطر‎; //夹角侧面 与斜边的比率

在此处就需求运用一些性子:

 普京网址 6

首先步:得到上下文 =>canvasElem.getContext(‘2d’卡塔尔国;

var c=document.getElementById(“myCanvas”);

普京网址 7

* rect方法只是安顿了矩形的门道,并不曾填写和描边。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章