Basic drawing
XML/HTML CodeCopy content to clipboard
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
-
var context = canvas.getContext('2d');
- // Line width
-
context.lineWidth = 4;
- // Brush color
-
context.strokeStyle = 'red';
- // Fill color
-
context.fillStyle = "red";
- // Line cap type
-
context.lineCap = 'butt'; // round, square
- // Start path
- context.beginPath();
- // Starting point
- context.moveTo(10,10);
- // End point
- context.lineTo(150,50);
- // Drawing
- context.stroke();
- ｝
Rectangle
XML/HTML CodeCopy content to clipboard
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.strokeRect(10,10,70,40);
- // Another way of rectangle
- context.rect(10,10.70,40);
- context.stroke();
-
- // solid rectangle
- context.beginPath();
- context.fillRect(10,10,70,40);
- // Another way solid rectangle
- context.beginPath();
- context.rect(10,10,70,40);
- context.fill();
- ｝
Round
XML/HTML CodeCopy content to clipboard
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- // Circle center coordinate x, circle center coordinate Y, arc radius, starting angle, ending angle, whether counterclockwise
- // The fourth and fifth parameters are the radians to be passed in. If you draw an angle of 30, you need to convert it into radians 30 * Math.PI / 180
- context.arc(100,100,70,0,130 * Math.PI / 180, true);
- context.stroke();
- context.fill();
- ｝
Rounded corners
XML/HTML CodeCopy content to clipboard
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.moveTo(20,20);
- context.lineTo(70,20);
- // Draw arc p1.x p1.y p2.x, p2.y arc radius for a path,
- context.arcTo(120,30,120,70, 50);
- context.lineTo(120,120);
- context.stroke();
-
- // Erase canvas artboard
- context.beginPath();
- context.fillRect(10,10,200,100);
-
- // Erase area
- context.clearRect(30,30,50,50);
- ｝
Quadratic Bezier Curve
XML/HTML CodeCopy content to clipboard
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.moveTo(100,100);
- context.quadraticCurveTo(20,50,200,20);
- context.stroke();
- ｝
Cubic Bezier Curve
XML/HTML CodeCopy content to clipboard
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.moveTo(68,130);
-
var cX1 = 20;
-
var cY1 = 10;
-
var cX2 = 268;
-
var cY2 = 10;
-
var endX = 268;
-
var endY = 170;
- context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
- context.stroke();
-
- // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总
- // 绘制圆形
- context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);
- // 限制区域
- context.clip();
- // 开始尝试绘制其他
- context.beginPath();
-
context.fillStyle = 'lightblue';
- // 结果矩形并没有显示出来
- context.fillRect(0,0,300,150);
- }
画板进阶使用
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
-
var context = canvas.getContext('2d');
- /*
- * drawImage(image,dx,dy)
- * drawImage(image,dx,dy,dw,dh)
- * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
- * image drawing object
- * Coordinates of dx dy canvas
- * dw, dh indicates the position of the image in the canvas to be drawn
- * sw, sh represents the area of image to be drawn
- * sx,sy The starting position of the drawing to be drawn
- */
-
var image = document.getElementById('img');
- context.drawImage(image, 0, 0);
-
var img = new Image();
-
img.src = 'images/1.jpg';
-
img.onload = function(){
-
// drawImage -
// Start drawing from 0,0 coordinates -
// context.drawImage(img,0,0); -
// Starting from 0, 0, draw the entire picture to 100,100 length and width -
// context.drawImage(img, 0, 0, 100, 100); -
// Screenshot, 50,50 to 100,100. Start drawing from 260,130 and place it in the 100,100 length and width area. -
// context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100); -
- // Use getImageData and putImageData to draw pictures
-
- context.drawImage(img, 10, 10);
- // Get pixel data from the artboard
- // Start position, end position
- var
imgData-
= context.getImageData(50,50,100,100);
- // Draw the data to the specified position coordinates on the drawing board
- context.putImageData(imgData,10,260);
- // Draw part of the pixel data to the drawing board
- context.putImageData(imgData,200,260,50,50,100,100);
-
// createImageData Create pixels -
var -
imgData = context.getImageData(50,50,200,200);
// Create an empty object of specified size -
var -
imgData01 = context.createImageData(imgData);
- for (
i-
= 0; i < imgData01.width * imgData01.height * 4; i =4) {
// Red pixels
- imgData01.data[i 0] = 255;
- imgData01.data[i 1] = 0;
- imgData01.data[i 2] = 0;
- imgData01.data[i 3] = 255;
-
- context.putImageData(imgData01, 10, 260);
- }
- }
-
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
