Comment: In html5, I think the most important thing is to introduce Canvas, so that we can draw various graphics in the web, and Canvas is a pixel-based drawing. Canvas is an html node equivalent to a artboard, we must draw with js
In html5, I think the most important thing is to introduce Canvas, so that we can draw various graphics in the web. It gives people the feeling of being a little blurred in this regard. In the html5 web, there are also XML-based drawings such as VML and SVG. Canvas is a pixel-based drawing. Canvas is an html node equivalent to a artboard, and we must draw in js.as follows:
<canvas id=myCanvas width=600 height=300>Your browser does not support the definition</canvas>.
We can get the canvas object as var c=document.getElementById(myCanvas); its js attribute method should be listed as follows:
1: Draw the rendered object, c.getContext(2d), get the 2d drawing object. No matter how many times we call the object, the object will be the same object.
2: Drawing method:
clecrRect(left,top,width,height) clears the defined rectangle area,
fillRect(left,top,width,height) draws the rectangle and fills it with fillStyle.
fillText(text,x,y) draws text;
strokeRect(left,top,width,height) draws the rectangle and draws the boundary with strokeStyle.
beginPath(): Turn on the drawing of the path and reset the path to the initial state;
closePath(): draw the path path ends, it will draw a closed interval and add a closed curve from the starting position to the current coordinate;
moveTo(x,y): Set the actual coordinates of the drawing.
lineTo(x,y); draws a straight line from the current position to x,y.
fill(), stroke(), clip(): the final fill and boundary outline that finishes drawing, clip area.
arc(): draw the arc, center position, starting radian, and ending radian to specify the position and size of the arc;
rect():Rectangular path;
drawImage(Imag img): draw pictures;
quadraticCurveTo(): quadratic spline path, parameter two control points;
bezierCurveTo(): Bezier curve, three control points of parameters;
createImageData, getImageData, putImageData: is the pixel data in Canvas. ImageData is the record width, height, and data data, where data is the record of our pigment as
argb, so the array size length is width*height*4, and the order is rgba respectively. getImageData is to get the rectangular area pixels, and putImageData is to set the rectangular area pixels;
… and so on!
3: Coordinate transformation:
translate(x,y): Translation, the origin moves to coordinates (x,y);
rotate(a): rotation transformation, rotation angle of a degree;
scale(x,y): scaling transformation;
save(), restore(): provides and a stack, save and restore drawing state, save pushes the current drawing state into the stack, restores the stack, and restores the drawing state;
… and so on!
OK, it's too late. Attached my test code:
<html>
<head>
</head>
<body>
<canvas>Your browser does not support it</canvas>
<script type="text/javascript">
var width,height,top,left;
width=height=100;
top=left=5;
var x=10;
var y=10;
var c=document.getElementById("myCanvas");
var maxwidth=c.width-5;
var maxheight=c.height-5;
var cxt=c.getContext("2d");
cxt.strokeStyle="#00f";
cxt.strokeRect(0,0,c.width,c.height);
var img=new Image();
img.src="1.gif";
var MyInterval=null;
start();
function Refresh(){
cxt.clearRect(left,top,width,height);
if((left+x)>(maxwidth-width)||left+x<0){
x=-x;
}
if((top+y)>(maxheight-height)||top+y<0){
y=-y;
}
left=left+x;
top=top+y;
cxt.drawImage(img,left,top,width,height);
cxt.font="20pt Songyi";
cxt.fillText("Breaking Wolf", left, top+25);
}
function start(){
if(MyInterval==null){
MyInterval=setInterval("Refresh()",100);
}
}
function stop(){
if(MyInterval!=null){
clearInterval(MyInterval);
MyInterval=null;
}
}
function InRectangle(x,y,rectx,recty,rwidth,rheight){
return (x>=rectx&&x<=rectx+rwidth)&&(y>=recty&&y<=recty+rheight)
}
c.onmouseover=function(e){
if(InRectangle(e.clientX,e.clientY,left,top,width,height)){
stop();
}
c.onmouseout=function(e){
start();
}
c.onmousemove=function(e){
if(InRectangle(e.clientX,e.clientY,left,top,width,height)){
if(MyInterval!=null){
stop();
}
}else{
start();
}
}
}
</script>
</body>
</html>