如何使用canvas绘图

图像


动态生成 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);

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

canvas api

2016/01/11 · HTML5 ·
Canvas

原文出处: 韩子迟   

4.解决方案

矩形


实心:

// 填充色 (默认为黑色) 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);

width:画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。;默认值是
300。

其他 API


属性:

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

方法:

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

ctx.moveTo(20,20);

圆形


实心:

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

可通过使用drawImage(image,x,y)就可以将图像放到canvas上,然后在canvas内设置宽高,就可以将图像放到画布中。

文字


文字)
的位置设定相对复杂,不像矩形、图像一样有个固定的左上角坐标,也不像圆一样有固定的圆心。文字的位置设置也是一个类似
(x, y) 形式的坐标,这个位置可以是文字的 4 个角,或者中心。

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

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

图片 2

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 即可。

2.3 canvas中的一些常用方法

Read More


图片 3

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

基本骨骼


 

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

ctx.textAlign=”right”;

线段


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

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

如何利用dom绘出一些简单的图

6).closePath():创建从当前点回到起始点的路径

5).arc():创建弧/圆线

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

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

height:画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是
width的一半。

// 显示不同的 textAlign 值

ctx.font=”15px Arial”;

2.canvas元素内部的width和height属性能使用rem单位吗?

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

ctx.textAlign=”end”;

canvas里面还可以添加一些文本属性,比如说font,textAlign,textBaseline等等

ctx.font=”40px Arial”;

demo1 制作渐变矩形

3).stroke():绘制已定义的路径

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

7.参考文献

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

4).beginPath():起始一条路径,或重置当前路径

context.moveTo(10,10);  //光标移到这点

大家好,我是IT修真院成都分院第6期的学员先小波,一枚正直纯洁善良的WEB前端程序员。

ctx.textAlign=”left”;

5.编码实战

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

ctx.closePath();

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

// 用渐变进行填充

}

参考一:https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5canvas中width,height与style
width,style height的区别

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

my_gradient.addColorStop(0,”red”);

demo2.strokeStyle=gradient;

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

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

fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。比如说绘制一个渐变色的矩形

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

参考三:http://www.w3school.com.cn/html5/html5\_canvas.aspW3C
HTML5标签Canvas

strokeStyle:设置或返回用于笔触的颜色、渐变或模式。

ctx.lineTo(20,100);

没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

在上个demo中发现如果设置canvas标签css的width,height与在canvas中设置width,height不一样,这是为什么?

2).moveTo():把路径移动到画布中的指定点,不创建线条

ctx.textAlign=”center”;

ctx.stroke();

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

相关文章