如何使用canvas绘图

canvas api

2016/01/11 · HTML5 ·
Canvas

初稿出处: 韩子迟   

大家好,小编是IT修真院萨格勒布分院第6期的学生先小波,一枚正直纯洁善良的WEB前端程序猿。

核心骨骼


永利澳门游戏网址304, 

<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>

明日给我们大快朵颐一下,修真院官方网址JS职责11,深度思考中的知识点——怎样选拔canvas?(最早)

矩形


实心:

// 填充色 (默以为丁香紫) ctx.fillStyle = ‘darkSlateBlue’; //
规定画布左上角坐标为 (0, 0) // 矩形左上角坐标 (0, 0) // 矩形大小
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, 0) // 矩形左上角坐标 (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);

1.背景介绍

圆形


实心:

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();

Canvas是HTML5新扩充的组件,它就好像一块幕布,能够用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();

平昔不Canvas的时期,绘图只好借助Flash插件完毕,页面不得不用JavaScript和Flash举行交互。有了Canvas,大家就再也没有须求Flash了,直接接纳JavaScript达成绘制。

图像


动态生成 img:

var img = new Image(); // 一定要等图片载入后(恐怕过去在缓存中了)才具用
drawImage 方法 img.onload = function() { // 左上角坐标 & 图像大小
ctx.drawImage(img, 0, 0, 100, 56); }; 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);

2.学问解析

文字


文字)
的职分设定相对复杂,不像矩形、图像同样有个固定的左上角坐标,也不像圆同样有确定地点的圆心。文字的岗位设置也是四个接近(x, y) 方式的坐标,那一个任务能够是文字的 4 个角,也许中央。

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

永利澳门游戏网址304 1

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
属性):

永利澳门游戏网址304 2

ctx.font = “bold 80px serif” ctx.textAlign = “start”; // 暗中同意值为 start
ctx.textBaseline = “hanging”; // 私下认可值为 阿尔法betic 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 就可以。

2.1 canvas的宽容性

其他 API


属性:

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

方法:

  • clearRect: 清除某部分(矩形区域)画布
    ctx.clearRect(0, 0, 100, 100)
  • measureText:
    总计文本对象的增长幅度
  • translate
  • rotate

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。

Read More


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

    1 赞 3 收藏
    评论

永利澳门游戏网址304 3

2.2 canvas的有个别宗旨性格

先是得说下width和height属性了,那是在canvas中要求的习性。

width:画布的万丈。和一幅图像一样,那个本性可以钦赐为一个整数像素值或然是窗口中度的比例。当以此值更动的时候,在该画布上早就成功的其他绘图都会擦除掉。;默许值是
300。

height:画布的大幅。和一幅图像同样,那个天性能够钦命为一个板寸像素值或然是窗口宽度的比例。当这一个值改动的时候,在该画布上业已做到的其余绘图都会擦除掉。私下认可值是
width的八分之四。

123

怎么利用dom绘出一些简短的图

在此处就必要使用一些性情:

fillStyle:设置或回到用于填充美术的颜色、渐变或形式。举例说绘制八个渐变色的矩形

fillRect(x,y,width,height):从坐标(x,y)处绘制叁个长度为width,宽度为height的填写矩形

demo1 制作渐变矩形

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

var demo1=a.getContext(“2d”);

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

my_gradient.addColorStop(0,”red”);

my_gradient.addColorStop(1,”blue”);

demo1.fillStyle=my_gradient;

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

strokeStyle:设置或重回用于笔触的颜料、渐变或格局。

strokeRect(x,y,width,height):从坐标(x,y)处绘制一个尺寸为width,宽度为height的矩形边框

line-width:表示边框宽度

canvas里面仍是能够拉长一些文本属性,举个例子说font,textAlign,textBaseline等等

demo2制作渐变矩形框

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

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

var gradient=demo2.createLinearGradient(0,0,170,0);

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

gradient.addColorStop(“0.5″,”blue”);

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

// 用渐变实行填写

demo2.strokeStyle=gradient;

demo2.lineWidth=10;//边框宽度

demo2.strokeRect(20,20,150,100);

demo3 使用font, textAlign属性

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

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

// 在岗位 150 创立蓝线

ctx.strokeStyle=”blue”;

ctx.moveTo(150,20);

ctx.lineTo(150,170);

ctx.stroke();

ctx.font=”15px Arial”;

// 展现不一致的 textAlign 值

ctx.textAlign=”start”;

ctx.fillText(“textAlign=start”,150,60);

ctx.font=”40px Arial”;

ctx.textAlign=”end”;

发表评论

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